动态添加修改删除html表格内容_html/css_WEB-ITnose

1.需求

需要实现收银台上添加修改删除商品信息时顾显可以实时看到其变化

2.解决

收银台和顾显通过tcp传输进行数据通信,顾显通过操作html中的表格进行数据添加修改和删除操作

3.代码

mytest.html

名称
颜色
尺寸
单价
折扣
数量
金额

dynamic_table.js

onerror=handleErrvar 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下不可用，这个代码是通用的

版权声明：本文为博主原创文章，未经博主允许不得转载。

传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://

下载