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").value17 //获取表格对象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=\'删除\' οnclick=\'delrow('+addRow.id+')\'>'31 }32 33 //删除34 function delrow(trId){35 //window.confirm的返回值是true和false36 var ok=window.confirm("确定要删除吗");37 //获取表格38 var testTb=document.getElementById("testTb")39 if(ok){40 //获取要删除行的index41 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="新增" οnclick="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="删除" οnclick="delrow()">62 </td>63 </tr>64 -->65</table>66 67 </body>68 </html>
