动态加入改动删除html表格内容

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="本页中存在错误。

"
    txt+="错误：" + msg + "
"
    txt+="URL: " + url + "
"
    txt+="行：" + l + "

"
    txt+="点击“确定”继续。

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

相关阅读:
yii 验证码功能的实现
关于php优化你必须知道的一些事情
php实现两分法查找
Python封装的访问MySQL数据库的类及DEMO
新学习的Python的代码(while循环)
基于位运算符的IP和数值转换
JS数组操作常用方法
JS输出日历
PHP程序输出日历
PHP中计算时间差(上周，上月，去年，昨天等)

原文地址：https://www.cnblogs.com/zhchoutai/p/8763146.html