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. SEO：查找网站的百度收录情况和如何让百度快速收录

    查询收录的工具地址: http://tool.chinaz.com/baidu/entry/ 如何让百度快速收录: 一.大家都熟知的百度网站提交,只需要提交网站的首页即可.以前做完这一步就被百度收录的 ...

  2. bzoj 1040 基向内环树dp

    #include<bits/stdc++.h> #define LL long long #define fi first #define se second #define mk mak ...

  3. Ubuntu下各种环境变量设置

    1.用户目录下的 .bashrc 文件在用户主目录下,有一个 .bashrc 文件,编辑该文件:$gedit ~/.bashrc 在最后边加入需要设置变量的shell语句,例如:export PATH ...

  4. python脚本实现ipv6的ddns功能

    话说在国家的推动下,ipv6地址已经开始优先在三大运营商推广,我自己家用的就是联通宽带100M光纤入户.有一次,不经意间发现,我们的光猫竟然获取到了ipv6地址,于是我开始浮想联翩. 说干就干,我先是 ...

  5. nyoj 1007 GCD(数学题 欧拉函数的应用)

    GCD 描述 The greatest common divisor GCD(a,b) of two positive integers a and b,sometimes written (a,b) ...

  6. 【LA 3641】 Leonardo's Notebook （置换群）

    [题意] 给出26个大写字母组成 字符串B问是否存在一个置换A使得A^2 = B [分析] 置换前面已经说了,做了这题之后有了更深的了解. 再说说置换群.   首先是群. 置换群的元素是置换,运算时是 ...

  7. [USACO 2017 Open Gold] Tutorial

    Link: 传送门 A: 由于每个颜色只染色一次就确定了所有要染色的区间 要求染色的次数其实就是求区间最多嵌套多少层,如果有区间相交则无解 以上操作明显可以将左端点排序后用栈来维护 #include ...

  8. BZOJ 4403 序列统计（Lucas）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4403 [题目大意] 给定三个正整数N.L和R,统计长度在1到N之间, 元素大小都在L到 ...

  9. BZOJ 3083 遥远的国度（树链剖分+线段树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3083 [题目大意] 链修改,子树最小值查询和换根操作 [题解] 树链剖分练习题. [代 ...

  10. openfire安装完毕后无法登录控制台(忘记密码)的解决方法

    openfire登录管理控制提示: Login failed:make sure your username and password are correct and that you’re an a ...