JavaScript 动态创建表格：新增、删除行和单元格

利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。

1、inserRow()和insertCell()函数

insertRow()函数可以带参数，形式如下：

insertRow(index)：index从0开始

　　这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：objTable.insertRow (objTable.rows.length).就是为表格objTable在最后新增一行。

　　insertCell()和insertRow的用法相同，这里就不再说了。

2、deleteRow()和deleteCell()方法

　　deleteRow()函数可以带参数，形式如下：
　　
　　deleteRow(index)：index从0开始

        和上面两个方法差不多的意思，就是删除指定位置的行和单元格。要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：
var row=document.getElementById("行的Id");
var index=row.rowIndex;  //有这个属性，嘿嘿
objTable.deleteRow(index);

    　在使用过程中我碰到的一个问题跟大家说一下，就是删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的，所以如果你要删除表格的所有行，下面的代码是错误的：
复制内容到剪贴板代码:
function clearRow(){
objTable= document.getElementById("myTable");

for( var i=1; i<objTable.rows.length ; i++ )
{
tblObj.deleteRow(i);
}
}　　这段代码要删除原来的表格的表体，有两个问题。首先不能是deleteRow(i)，应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半，所以正确的删除表格的行的代码应该这样：
复制内容到剪贴板代码:
function clearRow(){
objTable= document.getElementById("myTable");
var length= objTable.rows.length ;
for( var i=1; i<length; i++ )
{
objTable.deleteRow(i);
}
}3、动态设置单元格与行的属性

　　A、采用setAttribute()方法

　　格式如下：setAttribute(属性，属性值)
　　说明：这个方法几乎所有的DOM对象都可以使用，第一个参数是属性的名称，比如说：border，第二个就是你要为border设置的值了，比如：

　　var objMyTable = document.getElementById("myTable");
　　objMyTable.setAttribute("border",1);//为表格设置边框为1

　　其他的比如你要为一个TD设置高度，同样先取得这个TD对象，然后使用setAttribute()方法

　　var objCell = document.getElementById("myCell");
　　objCell.setAttribute("height",24);//为单元格设置高度为24

　　在使用的时候遇到一个设置样式的问题，不能用setAttribute("class","inputbox2");而应该使用 setAttribute("className","inputbox2")，呵呵，其他我估计也有同样的问题，有些属性和我们在DW里面的不一致，呵呵，大家自己摸索吧。

　　B、直接赋值

　　var objMyTable = document.getElementById("myTable");
　　objMyTable.border=1;//为表格设置边框为1
　　这个方法也全部适用，呵呵。

4、创建表格

　　了解了行<tr>与单元格<td>的增删那就可以创建表格了。

　　第一步：你需要有一个你去动态变化的表格，我这里讲的是已经存在页面的表格，我们要设置一个id:myTable

　　var objMyTable = document.getElementById("myTable");

　　第二步：创建行与列的对象

　　var index = objMyTable.rows.length-1;
　　var nextRow = objMyTable.insertRow(index);//要新增的行，我这里是从倒数第二行开始新增的
　　//单元格箱号
　　var newCellCartonNo = nextRow.insertCell();
　　var cartonNoName = "IptCartonNo";
　　newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
　　newCellCartonNo.setAttribute("className","tablerdd");

　　这样就搞定了，可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子，不过方法就大概是上面的了，呵呵，慢慢摸索吧~

例子：对表格添加一行

 

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 测试 </ title >
< script  language ="JavaScript" >
var  Count = false ,NO = 1 ;
function  addRow(){
Count =! Count;
// 添加一行
var  newTr  =  testTbl.insertRow(testTbl.rows.length);
// 添加两列
var  newTd0  =  newTr.insertCell();
var  newTd1  =  newTr.insertCell();
var  newTd2  =  newTr.insertCell();
// 设置列内容和属性
if (Count){newTr.style.background = " #FFE1FF " ;}
else  {newTr.style.background = " #FFEFD5 " ;}
newTd0.innerHTML  =   ' <input type=checkbox id="box4"> ' ;
NO ++
newTd1.innerText = " 第 " +  NO + " 行 " ;
}
</ script >
</ head >

< body >
< table  width ="399"  border =0  cellspacing ="1"  id ="testTbl"  style ="font-size:14px;"   >
< tr  bgcolor ="#FFEFD5" >
< td  width =6% >< input  type =checkbox  id ="box1" ></ td >
< td  > 第1行 </ td >
< td  >   </ td >
</ tr >
</ table >
< label >
< input  type ="button"  value ="插入行"  onclick ="addRow()"   />
</ label >
</ body >
</ html >

 

示例2：appendChild()方法

 

< html >
< head >
< title > My Test Page </ title >
< script  type ="text/javascript" >
<!--
var  textNumber  =   1 ;
function  addTextBox(form, afterElement) {
//  Increment the textbox number
textNumber ++ ;
//  Create the label
var  label  =  document.createElement( " label " );
//  Create the textbox
var  textField  =  document.createElement( " input " );
textField.setAttribute( " type " , " text " );
textField.setAttribute( " name " , " txt " + textNumber);
textField.setAttribute( " id " , " txt " + textNumber);
//  Add the label's text
label.appendChild(document.createTextNode( " Text Box # " + textNumber + " :  " ));
//  Put the textbox inside
label.appendChild(textField);
//  Add it all to the form
form.insertBefore(label,afterElement);
return   false ;
}
function  removeTextBox(form) {
if  (textNumber  >   1 ) {  //  If there's more than one text box
     //  Remove the last one added
    form.removeChild(document.getElementById( " txt " + textNumber).parentNode);
    textNumber -- ;
}
}
// -->
</ script >
< style  type ="text/css" >
<!--
label  {
display : block ;
margin : .25em 0em ;
}
-->
</ style >
</ head >
< body >
< form  id ="myForm"  method ="get"  action ="./"   />
< label > Text Box #1:  < input  type ="text"  name ="txt1"  id ="txt1"   /></ label >
< p >
     < input  type ="button"  value ="Add Textbox"  onclick ="addTextBox(this.form,this.parentNode)"   />
     < input  type ="button"  value ="Remove Textbox"  onclick ="removeTextBox(this.form)"   />
</ p >
< p >< input  type ="Submit"  value ="Submit"   /></ p >
</ form >
</ body >
</ html >

 

示例3：表格内增加一个文本框

 

< html >
< head >
< title > My Test Page </ title >
< script  type ="text/javascript" >
<!--
var  textNumber  =   1 ;
function  addTextBox(form, afterElement) {
//  Increment the textbox number
textNumber ++ ;
//  Create the label
var  label  =  document.createElement( " label " );
//  Create the textbox
var  textField  =  document.createElement( " input " );
textField.setAttribute( " type " , " text " );
textField.setAttribute( " name " , " txt " + textNumber);
textField.setAttribute( " id " , " txt " + textNumber);
//  Add the label's text
label.appendChild(document.createTextNode( " Text Box # " + textNumber + " :  " ));
//  Put the textbox inside
label.appendChild(textField);
//  Add it all to the form
form.insertBefore(label,afterElement);
return   false ;
}
function  removeTextBox(form) {
if  (textNumber  >   1 ) {  //  If there's more than one text box
//  Remove the last one added
form.removeChild(document.getElementById( " txt " + textNumber).parentNode);
textNumber -- ;
}
}
// -->
</ script >
< style  type ="text/css" >
<!--
label  {
display : block ;
margin : .25em 0em ;
}
-->
</ style >
</ head >
< body >
< form  id ="myForm"  method ="get"  action ="./"   />
< label > Text Box #1:  < input  type ="text"  name ="txt1"  id ="txt1"   /></ label >
< p >
< input  type ="button"  value ="Add Textbox"  onclick ="addTextBox(this.form,this.parentNode)"   />
< input  type ="button"  value ="Remove Textbox"  onclick ="removeTextBox(this.form)"   />
</ p >
< p >< input  type ="Submit"  value ="Submit"   /></ p >
</ form >
</ body >
</ html >