表格的动态添加和删除
一.动态的向表格中添加行；
（1）.首先得获取表格对象，table
通过id获取表格对象：var table=document.getElementById("表格id");
（2）.向表格中添加行使用insertRow(index);其中index为行添加在table中的下标，（下标从0开始，若table当前行数为n，那么若index=n，则刚好在表格行末添加新的一行；换句话说，如果要在table行末添加新行的话，则只需获取table当前的行数即可）
a.首先我们就获取表格的行数；
var rowNums=table.rows.length;//其中table.rows是值为表格行的数组；
b.table的总行数也就是在table行末插入新行的下标；
var tableRow=table.insertRow(rowNums);//insertRow方法返回值是插入的新行对象；
c.这里我将刚插入的行设置下id，为了方便下面的删除操作；
var times=new Date().getTime();
tableRow.id=times;
（3）接下来就是插入单元格了；插入单元格使用insertCell(index)方法；index为插入单元的下标（下标从0开始）；
var tableCell1=tableRow.insertCell(0);//insertCell()方法返回刚插入单元格
var tableCell2=tableRow.insertCell(1);
（4）j接下来就是设置单元格了；
tableCell1.innerHTML="";
tableCell2.innerHTML="<input type='button' value='删除' onclick='del("+times+")>"//在单元格中添加删除按钮，
二：动态的删除表格中的行；
1.获取删除行对象
var tableRow=document.getElementById(tableRowId);
2.获取删除行在table中的下标
var rowIndex=tableRow.rowIndex;
3.获取table对象
var table=document.getElementById("表格Id");
4.删除行,利用deleteRow(idnex)方法，idnex为删除行在table中行的下标；
table.deleteRow(rowIndex);
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>复习</title> 7 8 <script type="text/javascript"> 9 10 11 function addstu(){//向表中添加行 12 13 //1.首先将获取需要添加学生的姓名 14 var stuname=document.getElementById("stuname").value; 15 16 //2.获取表格对象 17 var table=document.getElementById("stutable"); 18 19 //3.向表格中插入行，table.inserRow(index)方法index为添加在table中行的下标；该方法返回刚插入的行对象 20 //3.1首先获取要添加在表格的第几行 21 var rowIndex=table.rows.length; 22 23 //3.2添加行 24 var tableRow=table.insertRow(rowIndex); 25 26 var times=new Date().getTime(); 27 tableRow.id=times; 28 29 //4.添加单元格 30 var tableCell1=tableRow.insertCell(0); 31 var tableCell2=tableRow.insertCell(1); 32 33 //5.设置单元格 34 tableCell1.innerHTML=stuname; 35 tableCell1.align="center"; 36 37 tableCell2.innerHTML="<input type='button' value='删除' onclick='del("+times+")'>"; 38 tableCell2.align="center"; 39 40 } 41 42 function del(tableRowId){//删除表格中的行 43 44 //1.根据行对id，获取行对象 45 var tableRow=document.getElementById(tableRowId); 46 47 //2.根据行行对象，获取该行在table中的在table中的下标； 48 var rowIndex=tableRow.rowIndex; 49 50 //3.获取table对象 51 var table=document.getElementById("stutable"); 52 53 //4.删除行,用表格对象.deleteRow(index)，index为删除的行在table中的下标; 54 table.deleteRow(rowIndex); 55 56 } 57 58 </script> 59 60 </head> 61 62 <body> 63 64 <input type="text" id="stuname"/> 65 <input type="button" value="添加" onclick="addstu()"/> 66 </br> 67 <table id="stutable" border="1" width="30%"> 68 <tr align="center"> 69 <th>学生姓名</th> 70 <th>操作</th> 71 </tr> 72 </table> 73 74 75 76 </body> 77 </html>
