操作表格示例---添加和删除表格内容

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100%;
            text-align: center;
            margin: 50px auto;
        }

        table {
            border: 1px solid #ccc;
            width: 400px;
            margin: 30px auto;
            text-align: center;
            border-collapse: collapse;
        }

        table td,
        table th {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>
            <input type="text" name="" id="" placeholder='姓名'>
            <input type="text" name="" id="" placeholder='年龄'>
            <button id='btn'>点我添加</button>
        </div>
        <table id="tab">
            <caption>统计表</caption>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Amliy</td>
                    <td>9</td>
                    <td><button>删除</button></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Bob</td>
                    <td>6</td>
                    <td><button>删除</button></td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td colspan='4'>总结</td>

                </tr>
            </tfoot>
        </table>
    </div>
    <script>
        var inp = document.getElementsByTagName('input');
        var btn = document.getElementById('btn');
        var tab = document.getElementById('tab');

        btn.onclick = function () {
            var val1 = inp[0].value;  // 姓名
            var val2 = inp[1].value;  // 年龄
            var newTr = document.createElement('tr');  // 创建新的一行

            // 创建第一列
            // var newTd1 = document.createElement('td'); 
            // newTd1.innerHTML = tab.tBodies[0].rows.length + 1;  // 把增加的序号赋给它

            newTr.appendChild(con('td', tab.tBodies[0].rows.length + 1));  // 序号加入到新行当中去

            // 创建第二列
            // var newTd2 = document.createElement('td'); 
            // newTd2.innerHTML = val1;  // 把用户填写的名字赋给它

            newTr.appendChild(con('td', val1)); // 姓名加入到新行当中去

            // 创建第三列
            // var newTd3 = document.createElement('td'); 
            // newTd3.innerHTML = val2;  // 把用户填写的年龄赋给它

            newTr.appendChild(con('td', val2)); // 年龄加入到新行当中去

            newTr.appendChild(con('td', '<button>删除</button>')); // 删除按钮加入到新行当中去


            // 将新行追加到表身中
            tab.tBodies[0].appendChild(newTr);

            // 每添加一个新数据时，再次遍历删除按钮添加事件
            del();

        }


        function con(ele, val) {
            var newTd = document.createElement(ele);
            newTd.innerHTML = val  // 把增加的序号赋给它
            return newTd;
        }


        // 删除表格
        function del() {
            var delBtn = tab.getElementsByTagName('button');
            for (var i = 0; i < delBtn.length; i++) {
                delBtn[i].onclick = function () {
                    this.parentNode.parentNode.remove();  // 删除当前行
                }
            }
        }
        del();
    </script>
</body>

</html>
操作表格示例---添加和删除表格内容

代码

效果
