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. 微擎系统BUG漏洞解决方法汇总（原创）

    微擎微赞系统BUG漏洞解决方法汇总 弄了微擎系统来玩玩,发觉这个系统BUG还不少,阿里云的提醒都一大堆,主要是没有针对SQL注入做预防,处理的办法基本都是用转义函数. 汇总: 1. 漏洞名称: 微擎任 ...

  2. K8s的内部Pod之间都不通，搞了快两天

    试了不亚于二十种方法,绝望的时候,回到了家. 想手工安装,又遇到flannel在手工下,会更改docker启动项的不完善. cni,或许就是k8s的大方向吧. 最后,抱着试一试的态度,将flannel ...

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

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

  4. git 命令小结

    一.git 版本管理 1.git log: 获取当前版本之前的所有操作 2.git log --pretty=oneline:获取当前版本的前三和后三个操作 3.git reflog :获取当前项目下 ...

  5. sublime text按esc经常进入command mode(不能输入任何东西)

    在使用sublime text进行 选中 操作中,如果使用了esc退出选中状态,会进入command mode,现象是不能输入任何东西,关闭当前编辑文件重新打开可以解决.但是很影响连贯性.可以通过一些 ...

  6. CF1025B Weakened Common Divisor【数论/GCD/思维】

    #include<cstdio> #include<string> #include<cstdlib> #include<cmath> #include ...

  7. CodeForces 731E Funny Game

    博弈,$dp$. 设$f[i]$表示 如果先手第一次出手取到位置$i$,直到游戏结束,双方均采取最优策略,先手-后手得分的差值. 那么$f[i]=min(sum[i]-sum[j]+maxf[j+1] ...

  8. 【JavaScript】JS将Java的Timestamp转为Date类型

    遇到一个小需求,由于要填充日期插件里的数据,前台要把java后台传来的Date类型的数据转成YYYY-MM-DD格式的时间数据.通过json传输,Java的Date类型的数据自动转成了时间戳,例如 “ ...

  9. UGUI的优点新UI系统三效率高效果好

    UGUI的优点新UI系统三效率高效果好 通过对批处理(batching).纹理图集(texture atlasing)和新的canvas组件的支持,新UI系统提供了一个经过优化的解决方案,使得开发者添 ...

  10. javascript中的对象创建与继承

    js是一门基于原型的面向对象语言,与传统的面向对象如Java,C#相比,它在对象创建及继承上有自己独特的实现方式,本文主要描述js中对象创建及继承的一些实践. 1.对象创建 方式一:工厂模式创建对象 ...