1.需求

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

2.解决

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

3.代码

mytest.html

  1. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Dynamic Table</title>
  6. <script type="text/javascript" src="js/dynamic_table.js">
  7. </script>
  8. </head>
  10. <body>
  11. <table>
  12. <tr>
  13. <th>名称</th>
  14. <th>颜色</th>
  15. <th>尺寸</th>
  16. <th>单位价格</th>
  17. <th>折扣</th>
  18. <th>数量</th>
  19. <th>金额</th>
  20. </tr>
  21. <tbody id="goods">
  22. </tbody>
  24. <tr>
  25. <td><input type="button" value="add" onClick="addRow('多彩1234', '红色', 'XL', '1000.00', '1.00', '1', '1000.00')" /></td>
  26. <td><input type="button" value="del" onClick="removeRow('goods', '0')"/></td>
  27. <td><input type="button" value="modify" onClick="modifyRow('goods', '0', '0', '张小宝')" /></td>
  28. <td><input type="button" value="clear" onClick="clearRows('goods')"/></td>
  29. </tr>
  30. </table>
  32. </body>
  34. </html>

dynamic_table.js

  1. onerror=handleErr
  2. var txt=""
  4. function handleErr(msg,url,l)
  5. {
  6.     txt="本页中存在错误。\n\n"
  7.     txt+="错误：" + msg + "\n"
  8.     txt+="URL: " + url + "\n"
  9.     txt+="行：" + l + "\n\n"
  10.     txt+="点击“确定”继续。\n\n"
  11.     alert(txt)
  12.     return true
  13. }
  15. function addRow(name, color, size, unit, discount, count, sum)
  16. {
  18.     var bodyObj=document.getElementById("goods");
  20.     if(bodyObj==null)
  21.     {
  22.         alert("Body of Table not Exist!");
  23.         return;
  24.     }
  26.     var rowCount = bodyObj.rows.length;
  27.     //var cellCount = myarray.length;
  28.     var newRow = bodyObj.insertRow(rowCount++);
  29.     newRow.insertCell(0).innerHTML=name;
  31.     newRow.insertCell(1).innerHTML=color;
  33.     newRow.insertCell(2).innerHTML=size;
  35.     newRow.insertCell(3).innerHTML=unit;
  37.     newRow.insertCell(4).innerHTML=discount;
  39.     newRow.insertCell(5).innerHTML=count;
  41.     newRow.insertCell(6).innerHTML=sum;
  42. }
  44. function removeRow(tbodyID, row)
  45. {
  47.     var bodyObj=document.getElementById(tbodyID);
  49.     if(bodyObj==null) 
  51.     {
  53.         alert("Body of Table not Exist!");
  55.         return;
  57.     }
  58.     var nrow = Number(row);
  59.     if (nrow <= bodyObj.rows.length)
  60.         bodyObj.deleteRow(nrow);
  61.     else
  62.         alert("nrow is less.");
  63. }
  65. function modifyRow(tbodyID, row, col, newvalue)
  66. {
  67.     var nrow = Number(row);
  68.     var ncol = Number(col);
  69.     var bodyObj=document.getElementById(tbodyID);
  71.     if(bodyObj==null)
  72.     {
  73.         alert("Body of Table not Exist!");
  74.         return;
  75.     }
  76.     try
  77.     {
  78.         //var tableObj = bodyObj.parentNode;
  79.         if (nrow < bodyObj.rows.length && ncol < bodyObj.getElementsByTagName('tr')[nrow].getElementsByTagName('td').length)
  80.         {
  81.             //这个在ie下能够 在google下不行
  82.             //bodyObj.rows(nrow).cells(ncol).innerHTML = newvalue;
  83.             //bodyObj.rows[nrow].childNodes[ncol].innerHTML = newvalue;
  85.             //这个在ie和google下都能够
  86.             document.getElementById(tbodyID).getElementsByTagName('tr')[nrow].getElementsByTagName('td')[ncol].innerHTML = newvalue;
  87.         }
  88.         else
  89.             alert("empty.");
  90.     }
  91.     catch (err)
  92.     {
  93.         alert(err.description);
  94.     }
  96. }
  98. function clearRows(tbodyID)
  99. {
  100.     var bodyObj=document.getElementById(tbodyID);
  101.     if(bodyObj==null)
  102.     {
  103.         alert("Body of Table not Exist!");
  104.         return;
  105.     }
  107.     for (var i = 0; i < bodyObj.rows.length; )
  108.         bodyObj.deleteRow(i);
  109. }

在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. redis之（十三）redis的三种启动方式

    Part I. 直接启动 下载 官网下载 安装 tar zxvf redis-2.8.9.tar.gz cd redis-2.8.9 #直接make 编译 make #可使用root用户执行`make ...

  2. .NET ORM SqlQuery

    查询 1.SqlQuery 用于执行原生SQL和存储过程 //转成list List<Student> list1 = db.SqlQuery<Student>("s ...

  3. 洛谷 P3128 [USACO15DEC]最大流Max Flow-树上差分(点权/点覆盖)(模板题)

    因为徐州现场赛的G是树上差分+组合数学,但是比赛的时候没有写出来(自闭),背锅. 会差分数组但是不会树上差分,然后就学了一下. 看了一些东西之后,对树上差分写一点个人的理解: 首先要知道在树上,两点之 ...

  4. web服务器解析漏洞总结（转）

    转:http://www.secpulse.com/archives/3750.html 解析漏洞总结 2015 /1/27 22:09 一.IIS 5.x/6.0解析漏洞 IIS 6.0解析利用方法 ...

  5. 按照grouip分组，之后分组调用生成正式凭证 的接口

    按照grouip分组,之后分组调用生成正式凭证 的接口 Map<String, List<OperatingLogVO>> resultMap = new HashMap< ...

  6. Visual Studio Xamarin中找不到iOS模拟器

    Visual Studio Xamarin中找不到iOS模拟器 Visual Studio可以正常连接Mac系统,但是在测试时候,提示以下错误信息:Failed to start iOS Simula ...

  7. asp总结

    什么是ASP.NET? ASP.NET是.NET FrameWork的一部分,是一项微软公司的技术,是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术,它可以在通过HTTP请求文档时再在W ...

  8. 【筛法求素数】Codeforces Round #426 (Div. 1) A. The Meaningless Game

    先筛出来1000以内的素数. 枚举x^(1/3) 和 y^(1/3)以内的素因子,这样除完以后对于x和y剩下的因子,小的那个的平方必须等于大的. 然后判断每个素因数的次数之和是否为3的倍数,并且小的那 ...

  9. 【动态规划】mr359-最大公约数之和

    [题目大意] 选取和不超过S的若干个不同的正整数,使得所有数的约数(不含它本身)之和最大. 输入一个正整数S. 输出最大的约数之和. 样例输入 Sample Input 11 样例输出 Sample ...

  10. （原创）Stanford Machine Learning (by Andrew NG) --- (week 10) Large Scale Machine Learning & Application Example

    本栏目来源于Andrew NG老师讲解的Machine Learning课程,主要介绍大规模机器学习以及其应用.包括随机梯度下降法.维批量梯度下降法.梯度下降法的收敛.在线学习.map reduce以 ...