JavaScript实现动态添加员工

<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>

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++;

                }

            }

        }