动态添加修改删除html表格内容

最新推荐文章于 2024-02-04 11:24:04 发布

电子枪

最新推荐文章于 2024-02-04 11:24:04 发布

阅读量7.2k

点赞数 1

分类专栏：网络部分文章标签： html 动态操作表格

本文链接：https://blog.csdn.net/zhang_ruiqiang/article/details/46874731

版权

网络部分专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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

电子枪

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
动态添加修改删除html表格内容

1.需求需要实现收银台上添加修改删除商品信息时顾显可以实时看到其变化2.解决收银台和顾显通过tcp传输进行数据通信,顾显通过操作html中的表格进行数据添加修改和删除操作3.代码mytest.html<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Dynamic Table
复制链接

扫一扫