动态加入改动删除html表格内容
2024-08-28 01:46:36
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下不可用,这个代码是通用的
最新文章
- 在mongoose中使用$match对id失效的解决方法
- Session、Cookie--2017年1月3日
- An exception occurred while acquiring a poolable resource. Will retry.
- (文摘)彻底理解webservice SOAP WSDL
- Concise - 面向对象的,一致的前端开发框架
- linux 的jdk安装
- JavaScript 参数传递与变量复制
- Selenium2学习-011-WebUI自动化实战实例-009-JavaScript 在 Selenium 自动化中的应用实例之一(赋值)
- HDU-4276 The Ghost Blows Light (树形DP+背包)
- 一起刑事案件法庭辩护 z
- UI:基础
- Dynamic - ExpandoObject学习心得
- java 访问器方法中对象引用的问题
- vs2015启动iis express失败
- Netty之二进制文件传输
- pyspider解析
- 同源策略与CORS
- 如何使用NSDL玩转微信跳一跳
- 假设检验,alpha,p值 通俗易懂的的理解。
- 简短介绍 C# 6 的新特性
热门文章
- [loj#2566][BZOJ5333] [Sdoi2018]荣誉称号 树形dp
- SQL快速入门 ( MySQL快速入门, MySQL参考, MySQL快速回顾 )
- vmware漏洞之一——转:利用一个堆溢出漏洞实现VMware虚拟机逃逸
- 转:攻击JavaWeb应用[4]-SQL注入[2]
- ExtJs之列表常用CRUD
- nyoj(表达式求值)
- POJ 1740 A New Stone Game 又是博弈论配对找规律orz 博弈论 规律
- BZOJ 2789 letters(树状数组)
- Codeforces 724E Goods transportation(最小割转DP)
- 【优先队列+贪心】POJ2431-Expedition