添加删除记录练习

最新推荐文章于 2023-12-24 14:17:15 发布

北冥烟雨

最新推荐文章于 2023-12-24 14:17:15 发布

阅读量116

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_45423800/article/details/118181078

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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">
    <link rel="stylesheet" type="text/css" href="css/03.css" />
    <title>Document</title>
    <script>
        /* 删除tr的响应函数 */
        function delA(){
            /* 获取tr */
            var tr =this.parentNode.parentNode;

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

            /* 删除之前弹出提示框 */
            var flag=confirm("确认删除"+name+"吗？");
                    
            /* 如果确认则删除 */
            if(flag){
                tr.parentNode.removeChild(tr);
            }

            /* 取消超链接的默认行为 */
            return false;
        }
        window.onload=function(){
            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(){
                /* 获取填写的信息 */
                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>";
                    
                /* 获取a元素，并绑定单击响应函数 */
                var a=tr.getElementsByTagName("a")[0];
                a.onclick=delA;

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

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

                /* 将tr添加到tbody中 */              
                tbody.appendChild(tr);
            }
        };
    </script>
</head>
<body>
    <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>7000</td>
            <td>
                <a href="javascript:;">Delete</a>
            </td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>10000</td>
            <td>
                <a href="deleteEmp?id=002">Delete</a>
            </td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>15000</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">
                    Submit
                </button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

03.css

#total{
    width: 450px;
    margin-left: auto;
    margin-right: auto;
}
#employeeTable {
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
}
th,td {
	background-color: white;
}
#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}
 
 #formDiv input {
	width: 100%;
} 
 
.word {
	width: 40px;
}
 
.inp {
	width: 200px;
}