DOM 表格删除tr,新增tr功能
删除tr
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>添加删除记录练习</title> 6 <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> 7 <script type="text/javascript"> 8 9 window.onload = function(){ 10 11 /* 12 * 点击超链接以后，删除一个员工的信息 13 */ 14 15 //获取所有额超链接 16 var allA = document.getElementsByTagName("a"); 17 18 //为每个超链接都绑定一个单击响应函数 19 for(var i=0 ; i < allA.length ; i++){ 20 allA[i].onclick = function(){ 21 22 //点击超链接以后需要删除超链接所在的那行 23 //这里我们点击那个超链接this就是谁 24 //获取当前tr 25 var tr = this.parentNode.parentNode; 26 27 //获取要删除的员工的名字 28 //var name = tr.getElementsByTagName("td")[0].innerHTML; 29 var name = tr.children[0].innerHTML; 30 31 //删除之前弹出一个提示框 32 /* 33 * confirm()用于弹出一个带有确认和取消按钮的提示框 34 * 需要一个字符串作为参数，该字符串将会作为提示文字显示出来 35 * 如果用户点击确认则会返回true，如果点击取消则返回false 36 */ 37 var flag = confirm("确认删除"+name+"吗?"); 38 39 //如果用户点击确认 40 if(flag){ 41 //删除tr 42 tr.parentNode.removeChild(tr); 43 } 44 45 /* 46 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为， 47 * 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为 48 */ 49 return false; 50 }; 51 } 52 53 }; 54 55 56 </script> 57 </head> 58 <body> 59 60 <table id="employeeTable"> 61 <tr> 62 <th>Name</th> 63 <th>Email</th> 64 <th>Salary</th> 65 <th> </th> 66 </tr> 67 <tr> 68 <td>Tom</td> 69 <td>tom@tom.com</td> 70 <td>5000</td> 71 <td><a href="javascript:;">Delete</a></td> 72 </tr> 73 <tr> 74 <td>Jerry</td> 75 <td>jerry@sohu.com</td> 76 <td>8000</td> 77 <td><a href="deleteEmp?id=002">Delete</a></td> 78 </tr> 79 <tr> 80 <td>Bob</td> 81 <td>bob@tom.com</td> 82 <td>10000</td> 83 <td><a href="deleteEmp?id=003">Delete</a></td> 84 </tr> 85 </table> 86 87 <div id="formDiv"> 88 89 <h4>添加新员工</h4> 90 91 <table> 92 <tr> 93 <td class="word">name: </td> 94 <td class="inp"> 95 <input type="text" name="empName" id="empName" /> 96 </td> 97 </tr> 98 <tr> 99 <td class="word">email: </td> 100 <td class="inp"> 101 <input type="text" name="email" id="email" /> 102 </td> 103 </tr> 104 <tr> 105 <td class="word">salary: </td> 106 <td class="inp"> 107 <input type="text" name="salary" id="salary" /> 108 </td> 109 </tr> 110 <tr> 111 <td colspan="2" align="center"> 112 <button id="addEmpButton" value="abc"> 113 Submit 114 </button> 115 </td> 116 </tr> 117 </table> 118 119 </div> 120 121 </body> 122 </html>
css
1 @CHARSET "UTF-8"; 2 #total { 3 width: 450px; 4 margin-left: auto; 5 margin-right: auto; 6 } 7 8 ul { 9 list-style-type: none; 10 } 11 12 li { 13 border-style: solid; 14 border-width: 1px; 15 padding: 5px; 16 margin: 5px; 17 background-color: #99ff99; 18 float: left; 19 } 20 21 .inner { 22 width: 400px; 23 border-style: solid; 24 border-width: 1px; 25 margin: 10px; 26 padding: 10px; 27 float: left; 28 } 29 30 #employeeTable { 31 border-spacing: 1px; 32 background-color: black; 33 margin: 80px auto 10px auto; 34 } 35 36 th,td { 37 background-color: white; 38 } 39 40 #formDiv { 41 width: 250px; 42 border-style: solid; 43 border-width: 1px; 44 margin: 50px auto 10px auto; 45 padding: 10px; 46 } 47 48 #formDiv input { 49 width: 100%; 50 } 51 52 .word { 53 width: 40px; 54 } 55 56 .inp { 57 width: 200px; 58 }
添加tr
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>添加删除记录练习</title> 7 <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> 8 <script type="text/javascript"> 9 10 /* 11 * 删除tr的响应函数 12 */ 13 function delA() { 14 15 //点击超链接以后需要删除超链接所在的那行 16 //这里我们点击那个超链接this就是谁 17 //获取当前tr 18 var tr = this.parentNode.parentNode; 19 20 //获取要删除的员工的名字 21 //var name = tr.getElementsByTagName("td")[0].innerHTML; 22 var name = tr.children[0].innerHTML; 23 24 //删除之前弹出一个提示框 25 /* 26 * confirm()用于弹出一个带有确认和取消按钮的提示框 27 * 需要一个字符串作为参数，该字符串将会作为提示文字显示出来 28 * 如果用户点击确认则会返回true，如果点击取消则返回false 29 */ 30 var flag = confirm("确认删除" + name + "吗?"); 31 32 //如果用户点击确认 33 if(flag) { 34 //删除tr 35 tr.parentNode.removeChild(tr); 36 } 37 38 /* 39 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为， 40 * 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为 41 */ 42 return false; 43 }; 44 45 window.onload = function() { 46 47 /* 48 * 点击超链接以后，删除一个员工的信息 49 */ 50 51 //获取所有额超链接 52 var allA = document.getElementsByTagName("a"); 53 54 //为每个超链接都绑定一个单击响应函数 55 for(var i = 0; i < allA.length; i++) {
/*
* for循环会在页面加载完成之后立即执行，
* 而响应函数会在超链接被点击时才执行
* 当响应函数执行时，for循环早已执行完毕
*/
56 allA[i].onclick = delA; 57 } 58 59 /* 60 * 添加员工的功能 61 * - 点击按钮以后，将员工的信息添加到表格中 62 */ 63 64 //为提交按钮绑定一个单击响应函数 65 var addEmpButton = document.getElementById("addEmpButton"); 66 addEmpButton.onclick = function() { 67 68 //获取用户添加的员工信息 69 //获取员工的名字 70 var name = document.getElementById("empName").value; 71 //获取员工的email和salary 72 var email = document.getElementById("email").value; 73 var salary = document.getElementById("salary").value; 74 75 //alert(name+","+email+","+salary); 76 /* 77 * <tr> 78 <td>Tom</td> 79 <td>tom@tom.com</td> 80 <td>5000</td> 81 <td><a href="javascript:;">Delete</a></td> 82 </tr> 83 需要将获取到的信息保存到tr中 84 */ 85 86 //创建一个tr 87 var tr = document.createElement("tr"); 88 89 //设置tr中的内容 90 tr.innerHTML = "<td>"+name+"</td>"+ 91 "<td>"+email+"</td>"+ 92 "<td>"+salary+"</td>"+ 93 "<td><a href='javascript:;'>Delete</a></td>"; 94 95 //获取刚刚添加的a元素，并为其绑定单击响应函数 96 var a = tr.getElementsByTagName("a")[0]; 97 a.onclick = delA; 98 99 //获取table 100 var employeeTable = document.getElementById("employeeTable"); 101 //获取employeeTable中的tbody.浏览器默认添加的 102 var tbody = employeeTable.getElementsByTagName("tbody")[0]; 103 //将tr添加到tbodye中 104 tbody.appendChild(tr); 105 /*tbody.innerHTML += "<tr>"+ 106 107 "<td>"+name+"</td>"+ 108 "<td>"+email+"</td>"+ 109 "<td>"+salary+"</td>"+ 110 "<td><a href='javascript:;'>Delete</a></td>" 111 112 +"</tr>";*/ 113 114 }; 115 116 }; 117 </script> 118 </head> 119 120 <body> 121 122 <table id="employeeTable"> 123 <tr> 124 <th>Name</th> 125 <th>Email</th> 126 <th>Salary</th> 127 <th> </th> 128 </tr> 129 <tr> 130 <td>Tom</td> 131 <td>tom@tom.com</td> 132 <td>5000</td> 133 <td> 134 <a href="javascript:;">Delete</a> 135 </td> 136 </tr> 137 <tr> 138 <td>Jerry</td> 139 <td>jerry@sohu.com</td> 140 <td>8000</td> 141 <td> 142 <a href="deleteEmp?id=002">Delete</a> 143 </td> 144 </tr> 145 <tr> 146 <td>Bob</td> 147 <td>bob@tom.com</td> 148 <td>10000</td> 149 <td> 150 <a href="deleteEmp?id=003">Delete</a> 151 </td> 152 </tr> 153 </table> 154 155 <div id="formDiv"> 156 157 <h4>添加新员工</h4> 158 159 <table> 160 <tr> 161 <td class="word">name: </td> 162 <td class="inp"> 163 <input type="text" name="empName" id="empName" /> 164 </td> 165 </tr> 166 <tr> 167 <td class="word">email: </td> 168 <td class="inp"> 169 <input type="text" name="email" id="email" /> 170 </td> 171 </tr> 172 <tr> 173 <td class="word">salary: </td> 174 <td class="inp"> 175 <input type="text" name="salary" id="salary" /> 176 </td> 177 </tr> 178 <tr> 179 <td colspan="2" align="center"> 180 <button id="addEmpButton"> 181 Submit 182 </button> 183 </td> 184 </tr> 185 </table> 186 187 </div> 188 189 </body> 190 191 </html>
