JavaScript练习—添加删除记录

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加删除记录练习</title>
    <style type="text/css">
        .w {
            width: 940px;
            margin: 10px auto;
        }

        #employeeTable {
            border: 1px solid black;
            margin: 30px auto;
        }

        #employeeTable td,th{
            border: 1px solid black;
        }

        table {
            margin: 0 auto;
            border: 1px solid black;
            border-spacing: 0;
        }


    </style>

    <script type="text/javascript">
        /*    1.confirm()用于删除一个带有确认和取消按钮的提示框
        需要一个字符串作为参数，该字符串将会作为提示文字显示出来
        如果用户点击确认则会返回true 点击取消则会返回false */
        function delA() {
            //点击超链接以后，删除一个员工信息    
            //获取所有超链接
            var allA = document.getElementsByTagName("a");

            //为每一个超链接绑定一个单击响应函数
            for (var i = 0; i < allA.length; i++) {
                // alert("for循环正在执行"+i);

                allA[i].onclick = function () {
                    //alert("响应函数正在执行"+i);

                    //点击超链接以后需要删除超链接所在的那一行
                    //这里我们点击哪个超链接this就是谁

                    //获取当前tr，即a节点父亲的父亲
                    var tr = this.parentNode.parentNode;

                    /*
                        for循环会在页面加载完成之后立即执行，
                         而响应函数会在超链接被点击时菜执行
                        当响应函数执行时，for循环早已执行完毕
                    */
                    // alert(allA[i] == this);//false
                    // alert(allA[i]);//undefined
                    // alert(i);//allA.length的值


                    //获取要删除员工的名字，即tr的第一个子节点
                    var name = tr.getElementsByTagName("td")[0].innerHTML;

                    //var name=tr.children[0].innerHTML;  
                    //与上面的方法一样，如果我们要用firstElementChild获取当前元素的第一个子元素也是一样的；

                    //删除之间弹出一个提示框
                    /*
                        confirm()用于弹出一个带有确认和取消按钮的提示框
                            需要一个字符串作为参数，该字符串会作为提示文字显示出来
                    */
                    var flag = confirm("确认删除" + name + "吗？");
                    if (flag) {
                        tr.parentNode.removeChild(tr);//点击确认删除
                    }
                    /*
                        点击超链接后，超链接会跳转页面，这是超链接的默认行为
                        但是我们此时不希望出现默认行为，可以在响应函数最后写returnfalse
                    */
                    return false;
                }
            }
        }
        window.onload = function () {
            /*
                点击超链接以后，删除一个员工信息    
            */
            //获取所有超链接
            var allA = document.getElementsByTagName("a");
            //为每一个超链接绑定一个单击响应函数
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = delA;     //在调用函数时，加括号会返回一个值，并立即执行   
                //不加括号表示把函数名fun这个指针拷贝一份给变量a，用于传参，
                //此时不是得到函数的结果，因为不会运行函数体代码。
                //它只是传递了函数体所在的地址位置。这样做的好处是可以在需要的时候找到函数并执行。 
            }


            /*
                添加员工的功能  
                    点击按钮以后，将员工信息添加到表格中
            */
            //为提交按钮绑定一个单击响应函数
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function () {
                //获取用户添加的员工信息
                //获取员工的名字
                var name = document.getElementById("empName").value;
                //获取其他信息email和salary
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                //alert(name+","+email+","+salary);

                //需要将获取到的信息保存到tr中  格式如下
                /*
                <tr>
                    <td>Bom</td>
                    <td>Bom@Bom.com</td>
                    <td>10000</td>
                    <td><a href="javascript:;">Delete</a></td>
                </tr>    
                */

                //以下方法创建有些复杂，但是便于我们理解DOM对象
                //创建一个tr
                var tr = document.createElement("tr");

                //创建四个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");

                //创建文本节点
                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.appendChild(delText);
                aTD.appendChild(a);

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

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

                //为新添的a再绑定一次单击响应函数
                a.onclick = delA;


                //下面几行代码与上面的作用一样，很便捷
                //var tr =document.createElement("tr");
                //设置tr里面的内容
                /*tr.innerHTML="<td>"+name+"</td>"+
                            "<td>"+email+"</td>"+
                            "<td>"+salary+"</td>"+
                            "<td><a href='javascript:;'>Delete</a></td>"
                var a = tr.getElementsByTagName("a")[0];
                a.οnclick=delA;    */


                //获取table
                var employeeTable = document.getElementById("employeeTable");
                //获取employeeTable中的tbody
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                //将tr添加到table中
                tbody.appendChild(tr);
            }
        }
    </script>
</head>

<body class="w">
    <table id="employeeTable">
        <tr>
            <th>name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@jerry.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bom</td>
            <td>Bom@Bom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

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


    </div>
</body>

</html>
posted @ 2020-07-30 16:11 我等着你阅读(298) 评论(0) 收藏举报
刷新页面返回顶部
老顽固小可爱

JavaScript练习—添加删除记录

公告
