添加删除记录练习（优化版）

最新推荐文章于 2024-09-27 15:27:45 发布

周白卿

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量111

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_51088023/article/details/125867854

版权

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部导航</title>
    <style type="text/css">
        *{
            margin: 0%;
            padding: 0%;
        }
        #employeeTable{
            text-align: center;
            margin: auto ;
            margin-top: 60px;
            border-collapse: collapse;
        }
        #formDiv{
            width: 250px;
            height: 180px;
            border: 1px solid;
            margin: auto;
            margin-top: 60px;
        }
        h4{
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        #formDiv table{
            margin: auto;
        }
    </style>
    <script>
        window.onload = function(){
            /* ------------------点击超链接之后，删除一个员工信息-----------------*/
            //获取所有超链接
            var Alla = document.getElementsByTagName("a");
            //设置删除记录响应函数
            var delA = function(){
                    //获取要删除的那一行
                    var tr = this.parentNode.parentNode;
                    //获取员工的名字
                    var name = tr.children[0].innerHTML;
                    //点击超链接后弹出确认对话框
                    var flag = confirm("确认删除"+name+"吗？");
                    //判断用户是否点击确认
                    if(flag==true){
                        //删除tr
                        tr.parentNode.removeChild(tr);
                    }                    
                    // 点击连接之后超链接会进行跳转，这是超链接默认行为
                    // 可以通过在响应函数的最后return false来取消默认行为 
                    return false;                    
                };
            //为每个超链接都绑定一个单击响应函数
            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
                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绑定单击响应函数
                a.onclick = delA;
                //获取table
                var employeeTable = document.getElementById("employeeTable");
                //获取table中的tbody
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                //将创建的tr添加到tbody中
                tbody.appendChild(tr);
            };
        };
    </script>
</head>
<body>
    <table id="employeeTable" border="1">
        <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="deleteEmp?id=001">Delete</a></td>
            <!-- 也可以将href的内容设置为"javascript:;"来避免超链接跳转 -->
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@bob.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
    <div id="formDiv">
        <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" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>