1 用script实现添加、删除、修改、全选、反选、删除所选、删除全部。
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>动态表格</title> 6 <!-- 7 8 <link rel="stylesheet" href="css/tablecss.css" type="text/css" />--> 9 <style> 10 11 body { 12 background-color: #ccc; 13 } 14 .show{ 15 text-align: center; 16 } 17 .show span{ 18 font-size: 50px; 19 font-weight: bold; 20 color: blue; 21 } 22 input{ 23 width: 80px; 24 } 25 26 .show input[type="button"]{ 27 width: 120px; 28 height: 40px; 29 background-color: blue; 30 font-size: 20px; 31 border: 0px solid; 32 border-radius: 5px; 33 cursor: pointer; 34 margin-top: 20px; 35 font-weight: bold; 36 color: white; 37 } 38 #t1{ 39 width: 600px; 40 height: 40px; 41 border: 1px solid black; 42 border-spacing: 0px; 43 /*等价于表格中的cellspacing*/ 44 45 margin-left: auto; 46 margin-right: auto; 47 } 48 #tb input[type="button"]{ 49 width: 70px; 50 height: 30px; 51 font-size: 15px; 52 border-radius: 10px; 53 } 54 #t1 td{ 55 border: 1px solid black; 56 padding: 5px; 57 text-align: center; 58 } 59 60 </style> 61 <script type="text/javascript" > 62 63 //工具函数 64 var $ = function(id) { 65 return document.getElementById(id); 66 } 67 68 var createObj = function(tagName) { 69 return document.createElement(tagName); 70 } 71 //添加 72 var addTr = function() { 73 //1.获得用户输入的内容 74 var nameTxt = $("i1").value; 75 var jobTxt = $('i2').value; 76 var salTxt = $('i3').value; 77 var timeTxt = $('i4').value; 78 //2.创建tr 79 var tr = createObj("tr"); 80 //3.创建td 81 var checkTd = createObj("td"); 82 var nameTd = createObj("td"); 83 var jobTd = createObj("td"); 84 var salTd = createObj("td"); 85 var timeTd = createObj("td"); 86 var dmlTd = createObj('td'); 87 88 //4.将用户信息加入到指定的td中 89 var checkBtn = createObj('input'); 90 checkBtn.type = "checkbox"; 91 checkTd.appendChild(checkBtn); 92 nameTd.innerHTML = nameTxt; 93 jobTd.innerHTML = jobTxt; 94 salTd.innerHTML = salTxt; 95 timeTd.innerHTML = timeTxt; 96 //创建一个删除按钮 97 var delBtn = createObj("input"); 98 delBtn.type = 'button'; 99 delBtn.value = "删除"; 100 101 // 为新建的btn添加事件监听属性 102 103 delBtn.onclick = function() { 104 delTr(this); 105 } 106 dmlTd.appendChild(delBtn); 107 //创建一个修改按钮 108 var modTrBtn = createObj("input"); 109 modTrBtn.type = 'button'; 110 modTrBtn.value = "修改"; 111 112 // 为新建的btn添加事件监听属性 113 114 modTrBtn.onclick = function() { 115 modTr(this); 116 } 117 dmlTd.appendChild(modTrBtn); 118 //5.将新建的td加入到tr中 119 tr.appendChild(checkTd); 120 tr.appendChild(nameTd); 121 tr.appendChild(jobTd); 122 tr.appendChild(salTd); 123 tr.appendChild(timeTd); 124 tr.appendChild(dmlTd); 125 126 //6.将tr加入到body中 127 var tbody = $("tb"); 128 tbody.appendChild(tr); 129 } 130 //删除 131 var delTr=function(obj){ 132 var flag=window.confirm("确定删除？"); 133 if(flag){ 134 var tb=$('tb'); 135 tb.removeChild(obj.parentNode.parentNode); 136 } 137 } 138 //删除全部 139 var delAll=function(){ 140 var flag=window.confirm("确定删除全部？") 141 if(!flag){ 142 return; 143 } 144 var tb=$('tb'); 145 //获得tb下面的所有tr; 146 var trs=tb.getElementsByTagName('tr'); 147 //将tr从tb逐条删除 148 for(var i=trs.length-1;i>=0;i--){ 149 tb.removeChild(trs[i]); 150 } 151 } 152 //全选 153 var selAll=function(){ 154 var tb=$('tb'); 155 var inputs=tb.getElementsByTagName('input'); 156 for(var i=0;i<inputs.length;i++){ 157 var input=inputs[i]; 158 if(input.type=="checkbox"){ 159 input.checked='checked'; 160 } 161 } 162 } 163 //反选 164 var oppsel=function(){ 165 var tb=$('tb'); 166 var inputs=tb.getElementsByTagName('input'); 167 for(var i=0;i<inputs.length;i++){ 168 var input=inputs[i]; 169 if(input.checked==true){ 170 input.checked=''; 171 } 172 else{ 173 input.checked='checked'; 174 } 175 } 176 } 177 //删除所选 178 var delSel = function() { 179 //1.获得tbody 180 var tbody = $("tb"); 181 //2.获得tbody里面的tr 182 var trs = tbody.getElementsByTagName("tr"); 183 //3.获得tr里的第一个td 184 for (var i = trs.length; i > 0; i--) { 185 var tds = trs[i - 1].getElementsByTagName("input"); 186 for (var j = 0; j < tds.length; j++) { 187 if (tds[j].type == "checkbox") { 188 if (tds[j].checked == true) { 189 tbody.removeChild(trs[i - 1]); 190 } 191 } 192 } 193 } 194 } 195 //修改 196 var modTr = function(obj){ 197 //1.获得隐藏的div 198 var overDiv = $('over'); 199 //2.将display的值由hidden改为block 200 overDiv.style.display = "block"; 201 /** 202 * 控制遮罩层的宽度 203 * */ 204 var w = window.innerWidth; 205 var h = window.innerHeight; 206 // console.log("w"+w+",h"+h); 207 overDiv.style.width=w+'px'; 208 overDiv.style.height=h+'px' 209 /*遮罩层的内部的div垂直居中*/ 210 var child_over =$("over_child"); 211 var middle = Math.floor((h-300)/2); 212 child_over.style.top = middle+"px"; 213 //3.通过按钮获得tr 214 var tr =obj.parentNode.parentNode; 215 //tr.cells:获得者一行中的所有的td 216 var nameTxt = tr.cells[1].innerHTML; 217 var jobTxt = tr.cells[2].innerHTML; 218 var salTxt = tr.cells[3].innerHTML; 219 var dateTxt = tr.cells[4].innerHTML; 220 //4.获得遮罩层中的tbody 221 var tb = $("over_tb"); 222 //5.获得tb中的所有的input 223 var inputs =tb.getElementsByTagName('input'); 224 inputs[0].value = nameTxt; 225 inputs[1].value = jobTxt; 226 inputs[2].value = salTxt; 227 inputs[3].value = dateTxt; 228 } 229 230 /* 231 * 取消按钮 232 */ 233 var cancelBtn = function(){ 234 //1.获得隐藏的div 235 var overDiv = $('over'); 236 overDiv.style.display = 'none'; 237 } 238 239 /* 240 * 确认修改 241 */ 242 243 var okBtn = function(){ 244 //1.获得遮罩层中的tbody 245 var over_tb = $('over_tb'); 246 //2.获得tb中的所有的input 247 var inputs = over_tb.getElementsByTagName('input'); 248 nameTxt=inputs[0].value; 249 jobTxt= inputs[1].value ; 250 salTxt= inputs[2].value ; 251 dateTxt=inputs[3].value; 252 //隐藏遮罩层 253 cancelBtn(); 254 //3.获得主页中的数据 255 var tb = $("tb"); 256 //获得所有的行 257 var rows = tb.rows.length; 258 for(var i = 0;i<rows;i++){ 259 var tr = tb.rows[i]; 260 if(tr.cells[1].innerHTML = nameTxt){ 261 if(tr.cells[2].innerHTML!=jobTxt){ 262 tr.cells[2].innerHTML=jobTxt; 263 tr.cells[2].className = 'modiyInfo'; 264 } 265 if(tr.cells[3].innerHTML!=salTxt){ 266 tr.cells[3].innerHTML=salTxt; 267 tr.cells[3].className = 'modiyInfo'; 268 } 269 if(tr.cells[4].innerHTML!=dateTxt){ 270 tr.cells[4].innerHTML=dateTxt; 271 tr.cells[4].className = 'modiyInfo'; 272 } 273 } 274 } 275 276 } 277 </script> 278 </head> 279 <body> 280 <p class="show"> 281 <span>动态表格</span> 282 <br /> 283 姓名<input id="i1" type="text"/> 284 职位 285 <select id="i2"> 286 <option>研发</option> 287 <option>测试</option> 288 <option>实施</option> 289 <option>前台</option> 290 </select> 291 工资 292 <input id="i3" type="text"/> 293 入职时间 294 <input id="i4" type="text"/> 295 <br /> 296 <input type="button" value="添加" onclick="addTr();"/> 297 </p> 298 <hr> 299 <table id="t1"> 300 <tr> 301 <td>选择</td> 302 <td>姓名</td> 303 <td>职位</td> 304 <td>工资</td> 305 <td>入职时间</td> 306 <td>操作</td> 307 </tr> 308 <tbody id="tb"> 309 <tr> 310 <td> 311 <input type="checkbox" /> 312 </td> 313 <td>haoren</td> 314 <td>研发</td> 315 <td>4000</td> 316 <td>2011-10</td> 317 <td> 318 <input type='button' value="删除" onclick="delTr(this);" /> 319 <input type='button' value="修改" onclick="modTr(this);"/> 320 </td> 321 </tr> 322 <tr> 323 <td> 324 <input type="checkbox" /> 325 </td> 326 <td>boss</td> 327 <td>前台</td> 328 <td>2000</td> 329 <td>2010-10</td> 330 <td> 331 <input type='button' value="删除"onclick="delTr(this);" /> 332 <input type='button' value="修改" onclick="modTr(this);"/> 333 </td> 334 </tr> 335 </tbody> 336 </table> 337 <hr /> 338 <p class="show"> 339 <input type="button" value="全选 " onclick="selAll();" /> 340 <input type="button" value="反选 " onclick="oppsel()"/> 341 <input type="button" value="删除所选 " onclick="delSel();"/> 342 <input type="button" value="全部删除 "onclick="delAll();" /> 343 </p> 344 345 <div id="over" style="display: none;"> 346 <div id="over_child"> 347 <p>修改用户信息</p> 348 <table> 349 <tbody id="over_tb"> 350 <tr> 351 <td>用户名</td> 352 <td><input type="text"disabled/></td> 353 </tr> 354 <tr> 355 <td>职位</td> 356 <td><input type="text"/></td> 357 </tr> 358 <tr> 359 <td>工资</td> 360 <td><input type="text"/></td> 361 </tr> 362 <tr> 363 <td>入职时间</td> 364 <td><input type="text"/></td> 365 </tr> 366 </tbody> 367 <tr > 368 <td colspan="2"> 369 <input type="button"value="取消"onclick="cancelBtn();"> 370 <input type="button"value="确认"onclick="okBtn();"> 371 </td> 372 </tr> 373 </table> 374 </div> 375 </div> 376 </body> 377 </html>