JavaScript实现动态添加员工

html代码：

<div id="empAdd">
        <fieldset>
            <legend><strong>添加员工</strong></legend>
            <label>编号:</label>
            <input type="text" size="15" id="txtId" name="empNo" value="" maxlength="4"
                autofocus="autofocus" placeholder="请输入员工编号"/>
            <label>姓名:</label>
            <input type="text" size="15" id="txtName" name="empName" value="" 
                maxlength="20"   placeholder="请输入姓名"/>
            <label>职位:</label>
            <select id="txtJob">
                <option value="0" selected="selected">请选择</option>
                <option value="程序员">程序员</option>
                <option value="设计师">设计师</option>
                <option value="项目经理">项目经理</option>
            </select>
            <br>
            <div>
               <input type="submit" name="name" id="btnAdd" value="添加" onclick="empAdd();" />
               <input type="reset" class="btn" id="btnReset" value="重置" />
            </div>
        </fieldset>
    </div>
    <div class="container">
        <h1>员工管理</h1>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" name="selectAll" onchange="selectAll();" id="all" />全选</th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>职位</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbContent">
            </tbody>
        </table>
        <p id="empty">
        </p>
        <input type="button" name="name" id="btnDelete" onclick="deleteEmp();" value="删除员工" />
    </div>

JavaScript代码：

window.onload = function (){
            //获取重置按钮
            let btnReset = document.getElementById("btnReset");
            btnReset.setAttribute("onclick","");
            btnReset.onclick = function reset (){
                document.querySelector("#txtId").value = "";
                document.querySelector("#txtName").value = "";
                document.querySelector("#txtJob").value = "0";
            }
        }
        
        function empAdd(){
            //  1.获取输入的信息
            //  1.1 获取输入的编号
            let id = document.querySelector("#txtId").value;
            //  1.2 获取输入的姓名
            let name = document.querySelector("#txtName").value;
            //  1.3 获取选择的职位
            let job = document.querySelector("#txtJob").value;
            //创建一个tr
            let tr = document.createElement('tr');
            tr.setAttribute("class","data")
            //创建5个td
            let tdSelect = document.createElement("td");
            let tdId = document.createElement("td");
            let tdName = document.createElement("td");
            let tdJob = document.createElement("td");
            let tdBtn = document.createElement("td");
            //创建selectBtn,并添加type属性，属性值为checkbox    添加name属性，属性值为record
            let selectBtn = document.createElement("input");
            selectBtn.setAttribute("type","checkbox");
            selectBtn.setAttribute("name","record");
            //创建deleteBtn  并修改其显示的内容,增加onclick属性,属性值为delData(this);
            let deleteBtn = document.createElement("button");
            deleteBtn.innerText = "删除";
            deleteBtn.setAttribute("onclick","delData(this);");
            //给5个td分别添加显示内容
            tdSelect.appendChild(selectBtn);
            tdId.appendChild(document.createTextNode(id));
            tdName.appendChild(document.createTextNode(name));
            tdJob.appendChild(document.createTextNode(job));
            tdBtn.appendChild(deleteBtn);
            //  获取tbody
            let tbody = document.getElementById("tbContent");
            //给tbody添加子节点tr
            tbody.appendChild(tr);
            //给tr添加子节点td
            tr.appendChild(tdSelect);
            tr.appendChild(tdId);
            tr.appendChild(tdName);
            tr.appendChild(tdJob);
            tr.appendChild(tdBtn);
            //清空输入
            document.querySelector("#txtId").value = "";
            document.querySelector("#txtName").value = "";
            document.querySelector("#txtJob").value = "0";
        }

        function delData(node){
            //获取当前节点的父节点
            let parNode = node.parentNode;
            //获取当前节点的祖父节点
            let gradNode = parNode.parentNode;
            //获取当前节点的祖父节点的父节点
            let greatGradNode = gradNode.parentNode;
            if (confirm("确定删除该记录吗？")){
                //移除祖父节点
                greatGradNode.removeChild(gradNode);
            }
        }

        function selectAll() {
            //获取所有name为record的checkbox
            let data = document.getElementsByName("record");
            data.forEach(function (value){
                value.checked = document.getElementsByName("selectAll")[0].checked;
            })
        }

        function deleteEmp(){
            /*
                删除所有被选中的记录
            */
            //获取所有记录
            let records = document.getElementsByName("record");
            console.log(records);
            let flag = 0;
            records.forEach(function (value){
                if (!value.checked){
                    flag++;
                }
            })
            if (flag===records.length){
                alert("请至少选中一条数据");
            }
            for (let i = 0; i < records.length;) {
                let state = records[i].checked;
                console.log(state);
                if (state){
                    let parNode = records[i].parentNode;
                    let gradNode = parNode.parentNode;
                    let greatGradNode = gradNode.parentNode;
                    greatGradNode.removeChild(gradNode);
                }else{
                    i++;
                }
            }
        }

实现效果：