javascript动态添加单元格的脚本代码

如何动态添加单元格!!

用insertRow()和insertCell()方法

其用法如下:
insertRow()

var newTR=TableOBJ.insertRow(N);

 
其中N表示插入到第几行!  
 
说明:当N=0时,插入到最上面一行!当N=-1时插入到最后一行,相当省略该参数!  
 
insertCell()

复制代码代码如下:

var newTD=TrOBJ.insertCell(N);

其中N表示插入到第几列!
说明:当N=0时,插入到最上面一行!当N=-1时插入到最后一行,相当省略该参数!
下面为一实例代码:

复制代码代码如下:

 
<script language="JavaScript">  
 
var Count=false,NO=1;  
 
function addRow(){  
 
Count=!Count;  
 
//添加一行  
 
var newTr = testTbl.insertRow();  
 
//添加三列  
 
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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>蓝光-BlueShine</title> <script language="JavaScript"> var Count=false,NO=1; function addRow(){ Count=!Count; //添加一行 var newTr = testTbl.insertRow(); //添加两列 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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

频道导航

javascript动态添加单元格的脚本代码

您可能感兴趣的文章: