JS-表格行的动态删除和添加(insertRow deleteRow)
row[]返回包含表格中所在行的一个数组
insertRow()在表格中插入一个新行
insertCell()在新添加的行中添空的<td>元素
deleteRow()删除行
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>表格行的动态删除和添加</title> 10 </head> 11 <body> 12 <script type="text/javascript"> 13 //增加 14 function addLine(){ 15 //获取text中填写的姓名 16 var username=document.getElementById("username").value 17 //获取表格对象 18 var testTb=document.getElementById("testTb") 19 //row[]返回包含表格中所在行的一个数组 20 //insertRow()在表格中插入一个新行 21 //向表格的最下面添加一行 22 var addRow=testTb.insertRow(testTb.rows.length); 23 //添加行的id，便于删除时使用 24 addRow.id=new Date().getTime();//使用时间戳获得唯一值 25 //在新添加的行中添空的<td>元素 26 var newobj1=addRow.insertCell(0) 27 var newobj2=addRow.insertCell(1) 28 //在<td元素中添加获取到的姓名 29 newobj1.innerHTML=username; 30 newobj2.innerHTML='<input type=\'button\' value=\'删除\' onclick=\'delrow('+addRow.id+')\'>' 31 } 32 33 //删除 34 function delrow(trId){ 35 //window.confirm的返回值是true和false 36 var ok=window.confirm("确定要删除吗"); 37 //获取表格 38 var testTb=document.getElementById("testTb") 39 if(ok){ 40 //获取要删除行的index 41 var trobj=document.getElementById(trId); 42 var index=trobj.rowIndex; 43 //选择确定，进行删除该行 44 testTb.deleteRow(index); 45 46 } 47 } 48 </script> 49 50 <input type="text" id="username" value=""> 51 <input type="button" value="新增" onclick="addLine()"> 52 <table id="testTb" border="1" width="200px"> 53 <tr> 54 <td>姓名</td> 55 <td>操作</td> 56 </tr> 57 <!-- 58 <tr> 59 <td>张三</td> 60 <td > 61 <input type="button" value="删除" onclick="delrow()"> 62 </td> 63 </tr> 64 --> 65 </table> 66 67 </body> 68 </html>
