1.需求

须要实现收银台上加入改动删除商品信息时顾显能够实时看到其变化

2.解决

收银台和顾显通过tcp传输进行数据通信,顾显通过操作html中的表格进行数据加入改动和删除操作

3.代码

mytest.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Dynamic Table</title>

<script type="text/javascript" src="js/dynamic_table.js">

</script>

</head>

<body>

<table>

<tr>

<th>名称</th>

<th>颜色</th>

<th>尺寸</th>

<th>单位价格</th>

<th>折扣</th>

<th>数量</th>

<th>金额</th>

</tr>

<tbody id="goods">

</tbody>

<tr>

<td><input type="button" value="add" onClick="addRow('多彩1234', '红色', 'XL', '1000.00', '1.00', '1', '1000.00')" /></td>

<td><input type="button" value="del" onClick="removeRow('goods', '0')"/></td>

<td><input type="button" value="modify" onClick="modifyRow('goods', '0', '0', '张小宝')" /></td>

<td><input type="button" value="clear" onClick="clearRows('goods')"/></td>

</tr>

</table>

</body>

</html>

dynamic_table.js

onerror=handleErr

var txt=""

function handleErr(msg,url,l)

{

    txt="本页中存在错误。\n\n"

    txt+="错误：" + msg + "\n"

    txt+="URL: " + url + "\n"

    txt+="行：" + l + "\n\n"

    txt+="点击“确定”继续。\n\n"

    alert(txt)

    return true

}

function addRow(name, color, size, unit, discount, count, sum)

{

    var bodyObj=document.getElementById("goods");

    if(bodyObj==null)

    {

        alert("Body of Table not Exist!");

        return;

    }

    var rowCount = bodyObj.rows.length;

    //var cellCount = myarray.length;

    var newRow = bodyObj.insertRow(rowCount++);

    newRow.insertCell(0).innerHTML=name;

    newRow.insertCell(1).innerHTML=color;

    newRow.insertCell(2).innerHTML=size;

    newRow.insertCell(3).innerHTML=unit;

    newRow.insertCell(4).innerHTML=discount;

    newRow.insertCell(5).innerHTML=count;

    newRow.insertCell(6).innerHTML=sum;

}

function removeRow(tbodyID, row)

{

    var bodyObj=document.getElementById(tbodyID);

    if(bodyObj==null) 

    {

        alert("Body of Table not Exist!");

        return;

    }

    var nrow = Number(row);

    if (nrow <= bodyObj.rows.length)

        bodyObj.deleteRow(nrow);

    else

        alert("nrow is less.");

}

function modifyRow(tbodyID, row, col, newvalue)

{

    var nrow = Number(row);

    var ncol = Number(col);

    var bodyObj=document.getElementById(tbodyID);

    if(bodyObj==null)

    {

        alert("Body of Table not Exist!");

        return;

    }

    try

    {

        //var tableObj = bodyObj.parentNode;

        if (nrow < bodyObj.rows.length && ncol < bodyObj.getElementsByTagName('tr')[nrow].getElementsByTagName('td').length)

        {

            //这个在ie下能够 在google下不行

            //bodyObj.rows(nrow).cells(ncol).innerHTML = newvalue;

            //bodyObj.rows[nrow].childNodes[ncol].innerHTML = newvalue;

            //这个在ie和google下都能够

            document.getElementById(tbodyID).getElementsByTagName('tr')[nrow].getElementsByTagName('td')[ncol].innerHTML = newvalue;

        }

        else

            alert("empty.");

    }

    catch (err)

    {

        alert(err.description);

    }

}

function clearRows(tbodyID)

{

    var bodyObj=document.getElementById(tbodyID);

    if(bodyObj==null)

    {

        alert("Body of Table not Exist!");

        return;

    }

    for (var i = 0; i < bodyObj.rows.length; )

        bodyObj.deleteRow(i);

}

在win7 ie10和google 下执行正常

4.备注

1.最好不使用windows自带的记事本。会存在编码问题，推荐使用notepad++，编码为utf8 无bom

2.部分js函数会存在ie下可用。google下不可用，这个代码是通用的

动态加入改动删除html表格内容的更多相关文章

  1. 在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

  2. 浅谈js中如何动态添加表头/表列/表格内容

    我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...

  3. 微信小程序之动态添加、删除指定内容(view)和获取input值

    这次遇到个问题: 1. 动态的添加指定的view内容..嗯..很简单..wx:for就搞定 2. 动态添加的内容中有input,最终获取值的时候,要获取到所有input的值并且是一个数组..嗯.. 3 ...

  4. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  5. mySQL用代码添加表格内容 删除数据方法

    通过代码对表格内容操作: 1.添加数据insert into Info values('p009','张三',1,'n001','2016-8-30 12:9:8') ; 给特定的列添加数据inser ...

  6. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  7. js实现前端动态筛选表格内容

    代码参考: http://www.sharejs.com/codes/javascript/4289 http://www.jb51.net/article/103420.htm https://ww ...

  8. jquery动态增加或删除tr和td【实际项目】

    难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...

  9. jqGrid subGrid配置 如何首次加载动态展开所有的子表格

    有时候需求需要默认加载表格的时候把子表格的数据也显示出来,经过研究相关SubGrids API配置如下: 属性 类型 描述 默认值 subGrid boolean 设置为true启用子表格.如果启用子 ...

随机推荐

  1. 六十一 Web开发 使用Web框架

    由于用Python开发一个Web框架十分容易,所以Python有上百个开源的Web框架.这里我们先不讨论各种Web框架的优缺点,直接选择一个比较流行的Web框架——Flask来使用. 用Flask编写 ...

  2. Optional int parameter 'id' is present but cannot be translated into a null value due to being decla

    这个错误可以将参数由int改为Integer

  3. 转：趋势科技研究员从漏洞、漏洞利用、Fuzz、利用缓解四个方面总结的一张脑图

  4. 数学【CF743C】Vladik and fractions

    Description 请找出一组合法的解使得\(\frac {1}{x} + \frac{1}{y} + \frac {1}{z} = \frac {2}{n}\)成立 其中\(x,y,z\)为正整 ...

  5. [NOI2016]循环之美(杜教筛)

    首先要求每个数互不相等,故有$x\perp y$. 可以发现$\frac{x}{y}$在$k$进制下为纯循环小数的充要条件为$x\cdot k^{len}\equiv x(mod\ y)$,即$y\p ...

  6. UVA 12338：Anti-Rhyme Pairs（后缀数组+ST表）

    [题目链接] click [题目大意] 给出一些字符串,询问查询任意两个字符串的最长公共前缀 [题解] 将字符串拼接,对拼接的字符串做后缀数组,对于查询的两个字符串, 只要在height数组上查询区间 ...

  7. BZOJ 1475 方格取数（二分图最大点权独立集）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1475 [题目大意] 给出一个n*n的方格,从中取一些不相邻的数字,使得和最大 [题解] ...

  8. 【分类讨论】【计算几何】【凸包】hihocoder 1582 ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 E. Territorial Dispute

    题意:平面上n个点,问你是否存在一种黑白染色方案,使得对于该方案,无法使用一条直线使得黑色点划分在直线一侧,白色点划分在另一侧.如果存在,输出一种方案. 如果n<=2,显然不存在. 如果所有点共 ...

  9. 【Kruskal+dfs】BZOJ1016- [JSOI2008]最小生成树计数

    [题目大意] 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树. [思路] 拖欠了三个月整(?)的题目,搞出来弄掉了……本年度写的时候姿势最丑 ...

  10. 【成端更新线段树模板】POJ3468-A Simple Problem with Integers

    http://poj.org/problem?id=3468 _(:зゝ∠)_我又活着回来啦,前段时间太忙了写的题没时间扔上来,以后再说. [问题描述] 成段加某一个值,然后询问区间和. [思路] 讲 ...