2022/1/11，增加删除记录_将202210121这一天的产品a的收入记录删除-CSDN博客

本文链接：https://blog.csdn.net/weixin_44645655/article/details/122442880
2022/1/11，增加删除记录
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function () {

            //删除tr的响应函数

            function delA() {

                //获取当前tr
                var tr = this.parentNode.parentNode;

                //获取要删除员工的名字
                var name = tr.children[0].innerHTML;

                /*
                *confirm();
                *      取消和确认两个按钮的提示框
                *      确认返回true，取消返回false
                *   
                * 
                */
                var flag = confirm("确认删除" + name + "吗?");

                if (flag) {
                    tr.parentNode.removeChild(tr);

                }
                return false;

            }

            //获取所有超链接
            var allA = document.getElementsByTagName("a");



            for (var i = 0; i < allA.length; i++) {

                allA[i].onclick = delA

            }



            //绑定按钮事件
            var addEmpButton = document.getElementById("addEmpButton");

            addEmpButton.onclick = function () {
                //获取员工信息
                //获取name,email,salary
                var name = document.getElementById("empName").value;
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                /*
                <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
                </tr>
                将获取到的东西保存在tr中
                */

                //创建一个tr
                var tr = document.createElement("tr");


                //新方法
                //设置tr中的内容
                tr.innerHTML = "<td>" + name + "</td>" + "<td>" + email + "</td>" + "<td>" + salary + "</td>" + "<td>" + "<a href='javascript:;'>delete</a>" + "</td>";

                //获取刚刚添加的a，并且绑定单击响应函数
                var a = tr.getElementsByTagName("a")[0];

                a.onclick = delA;




                // //创建四个td
                // var nameTD = document.createElement("td");
                // var emailTD = document.createElement("td");
                // var salaryTD = document.createElement("td");
                // var aTD = document.createElement("td");

                // //创建一个a超链接
                // var a = document.createElement("a");

                // //向a中添加href属性
                // a.href = "javascript:;";

                // //为新添加的a再绑定一次单机响应函数

                // a.onclick = delA;

                // //创建文本节点
                // var nameText = document.createTextNode(name);
                // var emailText = document.createTextNode(email);
                // var salaryText = document.createTextNode(salary);
                // var delText = document.createTextNode("delete");

                // //将文本添加到td中
                // nameTD.appendChild(nameText);
                // emailTD.appendChild(emailText);
                // salaryTD.appendChild(salaryText);

                // //向a中添加文本
                // a.appendChild(delText);

                // aTD.appendChild(a);

                // //将tr添加到td
                // tr.appendChild(nameTD);
                // tr.appendChild(emailTD);
                // tr.appendChild(salaryTD);
                // tr.appendChild(aTD);

                //获取table
                var tab = document.getElementById("employeeTable");

                //获取内存的tbody
                var tbody = employeeTable.getElementsByTagName("tbody")[0];

                tbody.appendChild(tr);





            };



        };
    </script>
</head>

<body>
    <table align="center" id="employeeTable" border="2">

        <tr>
            <th>Name</th>
            <th>email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>

        <tr>
            <td>Tom</td>
            <td>123456@qq.com</td>
            <td>100</td>
            <td><a href="001">delete</a></td>
        </tr>

        <tr>
            <td>Jerry</td>
            <td>12356@qq.com</td>
            <td>1000</td>
            <td><a href="#">delete</a></td>
        </tr>

        <tr>
            <td>Hom</td>
            <td>12456@qq.com</td>
            <td>10000</td>
            <td><a href="#">delete</a></td>
        </tr>
    </table>

    <div id="formDiv" align="center">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>

</body>

</html>