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. hdu 2883(构图+最大流+压缩区间)

    kebab Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  2. 玩转RaspberryPi

    step1:烧制树莓派内存卡 可以用[Linux系统烧制]http://www.williamsang.com/archives/1764.html 如果用windows烧制的话,就用Win32 Di ...

  3. [转]windows消息机制（MFC）

    消息分类与消息队列 Windows中,消息使用统一的结构体(MSG)来存放信息,其中message表明消息的具体的类型, 而wParam,lParam是其最灵活的两个变量,为不同的消息类型时,存放数据 ...

  4. ofbiz之entity实体写法

    实体定义文件  实体定义文件一般存放位置是在对应模块的entity文件夹下面,以party为例,party的实体定义文件路径为 %ofbiz-home%\applications\party\enti ...

  5. GT-----如何做Android应用流量测试？

    1.如何判断一个应用的流量偏高? 如果看流量的绝对值看不出高低,那就找几个同类型的产品对比一下,如果完成同样的事物,被测应用比同类产品高很多,那就偏高了,可能有优化的空间. 2.如何找到有效的优化点? ...

  6. Linux下GCC相关知识点

    摘要: 总结GCC的具体使用,动态库静态库的相关问题 参考资料: <Linux网络编程> ISBN:9787302207177 p19 1 GCC简介 GCC是Linux下的编译工具集,是 ...

  7. win10的VMware虚机host-only模式下，虚拟机无法ping通物理机，而物理机能ping通虚机

    1.打开控制面板—->Windows防火墙(win10操作系统) 2.点击最上面的”允许应用或功能通过xxxxx” 3.勾上上图的“文件和打印机共享” 然后点确定.

  8. [lampp] 不能通过互联网连接数据库 MySQL is not accessable via network

    LAMPP安装目录下的/etc/my.cnf文件注释掉skip-networking #skip-networking#skip-networking

  9. 洛谷P1280 尼克的任务 [DP补完计划]

    题目传送门 题目描述 尼克每天上班之前都连接上英特网,接收他的上司发来的邮件,这些邮件包含了尼克主管的部门当天要完成的全部任务,每个任务由一个开始时刻与一个持续时间构成. 尼克的一个工作日为N分钟,从 ...

  10. python——聊聊iterable，sequence和iterators

    ---------------------------------------------------------------前言----------------------------------- ...