表格的动态添加和删除
一.动态的向表格中添加行;
(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);
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>