JS 表格节点操作

JS 表格节点操作

实现的功能：
在表格中实现添加商品，删除商品和修改商品。

实现效果如图所示：

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function add_shop(){//添加商品
            var s_name=prompt("请输入商品名称：");
            var s_num=prompt("请输入商品数量：");
            var s_price=prompt("请输入商品价格：");

            var table=document.getElementsByTagName("table")[0];
            var tr=table.insertRow(1);
            var td1=tr.insertCell(0);
            td1.innerText=s_name;
            var td2=tr.insertCell(1);
            td2.innerText=s_num;
            var td3=tr.insertCell(2);
            td3.innerText=s_price;
            var td3=tr.insertCell(3);
            td3.innerHTML="<td><input type='button' value='删除' onclick='del_shop(this)'>&nbsp;<input type='button' value='修改' onclick='modify_num(this)'></td>";
        }
        function del_shop(cell){//删除商品
            var tr=cell.parentNode.parentNode;//input --> td --> tr
            var table=document.getElementsByTagName("table")[0]
            table.deleteRow(tr.rowIndex);
        }
        function modify_num(cell){//修改商品
            var tr=cell.parentNode.parentNode.cells;//input --> td --> tr
            for(var i=0;i<tr.length-1;i++) {
                if (cell.value == "修改") {
                    var value = tr[i].innerText;//获取当前td里面的值
                    tr[i].innerHTML = "<input type='text' value='" + value + "'>";
                }else {
                    tr[i].innerHTML = tr[i].firstElementChild.value;
                }
            }
            if(cell.value == "修改"){
                cell.value = "确定";
            }
            else{cell.value = "修改";
            }
        }
    </script>
</head>
<body align="center">
<table  border="1" align="center">
    <tr>
        <td width="200">商品名称</td>
        <td width="200">数量</td>
        <td width="200">价格</td>
        <td width="200">操作</td>
    </tr>
    <tr>
        <td>C从入门到住院</td>
        <td>8</td>
        <td>￥78</td>
        <td>
            <input type="button" value="删除" onclick="del_shop(this)">
            <input type="button" value="修改" onclick="modify_num(this)">
        </td>
    </tr>
    <tr>
        <td>集思广益</td>
        <td>7</td>
        <td>￥89</td>
        <td>
            <input type="button" value="删除" onclick="del_shop(this)">
            <input type="button" value="修改" onclick="modify_num(this)">
        </td>
    </tr>
    <tr>
        <td>大成java</td>
        <td>0</td>
        <td>￥99</td>
        <td>
            <input type="button" value="删除" onclick="del_shop(this)">
            <input type="button" value="修改" onclick="modify_num(this)">
        </td>
    </tr>
    <tr>
        <td>大数据的智慧</td>
        <td>4</td>
        <td>￥103</td>
        <td>
            <input type="button" value="删除" onclick="del_shop(this)">
            <input type="button" value="修改" onclick="modify_num(this)">
        </td>
    </tr>
    <tr>
        <td>语言的艺术</td>
        <td>2</td>
        <td>￥98</td>
        <td>
            <input type="button" value="删除" onclick="del_shop(this)">
            <input type="button" value="修改" onclick="modify_num(this)">
        </td>
    </tr>
    <tr>
        <td colspan="4"><input type="button" onclick="add_shop()" value="增加一行"></td>
    </tr>
</table>
</body>
</html>