使用js节点的克隆实现页面内容的增删

使用节点克隆实现以下效果

要求：1.输入姓名，年龄后，点击添加按钮，对下方表格中增添一行新的数据，两者有一个为空则不可添加，并弹出警告框

           2.点击删除按钮，可删除本行数据

           3.无论增加还是删除，序号列不可以乱

           4.必须使用节点克隆完成本次任务

html结构

     

<div>
    姓名：<input type="text" class="name">
    年龄: <input type="number" class="age">
    <button onclick="add()">添加</button>
</div>
<table border="1" width="400" align="center" cellspacing="0" rules="all" cellpadding="0">
    <!-- 标题 -->
    <tr align="center">
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <!-- 克隆模板 -->
    <tr align="center" style="display: none;">  
        <td>0</td>
        <td>张三</td>
        <td>18</td>
        <td onclick="del()">删除</td>
    </tr>
    <!-- 初始样例 -->
    <tr align="center">
        <td>1</td>
        <td>张三</td>
        <td>18</td>
        <td onclick="del()">删除</td>
    </tr>
</table>

     css样式如下：

         div{
            width: 400px;
            margin: auto;
        }
        input{
            width: 120px;
        }
        tr td:last-child{
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }
        tr{
            height: 40px;
        }
        /* 清除数字输入框的右侧箭头 */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        button{
            width: 45px;
            background: #fef;
            border: 1px solid #666;
            border-radius: 5px;
        }

js代码

 var na = document.querySelector(".name") //获取姓名输入框
        var age = document.querySelector(".age") //获取年龄输入框
        var tr = document.querySelector("tr:nth-child(2)") // 获取克隆模板
        var table = document.querySelector("table") //获取table，克隆节点需要插入table标签内
        var trd = document.querySelectorAll("tr td:first-child") // 获取序号列表
        var add = function(){ //添加函数
            if(na.value.trim().length>0&&age.value.length>0){ //姓名年龄均有值时才允许添加 .trim()方法去除字符串首尾空格
                trd[0].nextElementSibling.innerHTML = na.value.trim() //将姓名输入框的值赋给模板中的姓名单元格
                trd[0].nextElementSibling.nextElementSibling.innerHTML = age.value.trim()//将年龄输入框的值赋给模板中的年龄单元格
                table.append(tr.cloneNode(true)) //克隆模板并添加到table标签内
                table.lastChild.style.display="" // 使克隆节点展示
                numb() // 调用序号函数刷新所有序号
                na.value="" //将姓名输入框的内容重置
                age.value=""//将年龄输入框的内容重置
            }else{ // 不符合时弹出警告框
                alert("姓名和年龄都不可为空") 
            }
        }
        // 序号函数
        var numb = function(){
            trd = document.querySelectorAll("tr td:first-child") //添加或删除后内容改变，需要重新获取序号列
            for(var i = 0;i<trd.length;i++){
                trd[i].innerHTML=i //将序号列的内容从0开始编号，编号为0的是模板，隐藏不显示，所以页面内容从1开始排列
            }
        }
        var del = function(){ // 删除函数
            event.target.parentNode.remove() // 删除点击元素的父节点
            numb() // 刷新序号列
        }