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. OpenCL学习笔记（三）：OpenCL安装，编程简介与helloworld

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入. OpenCL安装 安装我不打算 ...

  2. hdu 2955(概率转化,01背包)

    Hot~~招聘——巴卡斯(杭州),壹晨仟阳(杭州),英雄互娱(杭州) (包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? Robberies Time Limit: 2000/100 ...

  3. hdu 1041(递推,大数)

    Computer Transformation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/ ...

  4. python启停脚本的编写

    先占个位置,打算记录一下启停python 的脚本start.sh,stop.sh的写法. 内容包括启动python脚本的方式,日志的重定向,获取进程id,以及杀掉进程. 参考文章: http://bl ...

  5. NET牛人应该知道些什么？(瞬间觉得自己弱爆了)

    任何一个使用.NET的人 描述线程与进程的区别? 什么是Windows服务,它的生命周期与标准的EXE程序有什么不同 Windows上的单个进程所能访问的最大内存量是多少?它与系统的最大虚拟内存一样吗 ...

  6. HDMI 电视 点对点 桌面超出屏幕

    一直在用电视作显示器,但是没有注意点对点到问题,只是感觉字体发虚.直到今天装win10,桌面会超出屏幕,使用intel控制面板调整分辨率后正常,但是注销或重启会再次回复.百度无果,自己摸索,不仅解决了 ...

  7. Python BeautifulSoup 简单笔记

    Beautiful Soup 是用 Python 写的一个 HTML/XML 的解析器,它可以很好的处理不规范标记并生成剖析树.通常用来分析爬虫抓取的web文档.对于 不规则的 Html文档,也有很多 ...

  8. 【BZOJ 3166】【HEOI 2013】Alo

    http://www.lydsy.com/JudgeOnline/problem.php?id=3166 这道题难点在于求能对一个次大值有贡献的区间. 设这个次大值为\(a_i\),\(a_i\)左边 ...

  9. noip 2008 传纸条

    题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的是 ...

  10. [BZOJ 2298] Problem A

    Link: BZOJ 2298 传送门 Solution: 可以将每个人的话转化为$[l[i],r[i]]$的人得分相同 用$map$记录认为$[i,j]$相同的人数,$pos[i][j]$记录以$i ...