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 下不可用, 这个代码是通用的
来源: http://www.bubuko.com/infodetail-2556451.html