<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> tr{ border: 0px; } </style> <script type="text/javascript"> //加载页面完了在执行js window.onload window.onload=function(){ //1.删除 点击超链接执行,删除一个员工的信息 //获取所有超链接a var allA=document.getElementsByTagName("a"); //为每个超链接绑定单击事件函数 for (i=0;i<allA.length;i++) { var delA=function(){ //弹出是否删除提示框 var tr=this.parentNode.parentNode;//获取tr var name=tr.firstElementChild.innerText;//动态获取要删除的name var s=confirm("确认删除"+name+"?"); if(s==true){ //删除那一行,点哪一个this就是那个a var tr=this.parentNode.parentNode;//获取tr tr.remove(); } //此时不希望出现默认跳转页面行为 return false; } allA[i].onclick=delA; } //2.添加 添加员工信息到表格中 var addEmpButton=document.getElementById("addEmpButton"); addEmpButton.onclick=function(){ // alert("hello"); //获取员工信息,文本框的内容就死value var name=document.getElementById("empName").value; var email=document.getElementById("email").value; var salary=document.getElementById("salary").value; //将获取到的信息保存到tr中,格式相同 //创建tr var tr=document.createElement("tr"); //tr里添加td tr.innerHTML="<td>"+name+"</td>"+ "<td>"+email+"</td>"+ "<td>"+salary+"</td>"+ "<td><a href='javascript:;'>DELETE</a></td>";//javascript:;不让跳转 //获取添加的a,为其绑定1.的删除响应函数 var a=tr.getElementsByTagName("a")[0]; a.onclick=delA; //吧1的删除函数var了一个值 //获取table var employeeTable=document.getElementById("employeeTable"); //table默认有一个tbody var tbody=employeeTable.getElementsByTagName("tbody")[0]; tbody.appendChild(tr); } } </script> </head> <body> <table id="employeeTable" border="" cellspacing="" cellpadding=""> <tr> <td>Name</td> <td>Email</td> <td>Salary</td> <td> </td> </tr> <tr> <td>Tom</td> <td>[email protected]</td> <td>5000</td> <td><a href="deleteEmp?id=001">DELETE</a></td> </tr> <tr> <td>Jerry</td> <td>[email protected]</td> <td>8000</td> <td><a href="deleteEmp?id=002">DELETE</a></td> </tr> <tr> <td>Bob</td> <td>[email protected]</td> <td>10000</td> <td><a href="deleteEmp?id=003">DELETE</td> </tr> </table> <br /><br /><br /> <div id="formDiv" style="border: solid 1px black;width: 300px;"> <h4>添加新员工</h4> <table border="0px" cellspacing="" cellpadding=""> <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> <td colspan="2" align="center"> <button id="addEmpButton" value="abc">Submit</button> </td> </tr> </table> </div> </body> </html>
JavaScript Date删除添加员工信息练习
猜你喜欢
转载自www.cnblogs.com/wangdongwei/p/11282410.html
今日推荐
周排行