javascript 动态添加表格行

javascript 动态添加表格行 

原文地址：http://zengxiangshun.iteye.com/blog/1121779
动态添加表格行 

表格部分代码如下： 

<table id="testTbl" border=1> 
<tr id="tr1"> 
<td width=6%><input type=checkbox id="box1"></td> 
<td id="b">第一行</td> 
</tr> 
<tr id="tr2"> 
<td width=6%><input type=checkbox id="box2"></td> 
<td id="b">第二行</td> 
</tr> 
<tr bgcolor=#0000FF> 
<td width=6%><input type=checkbox id="box3"></td> 
<td>第三行</td> 
</tr> 
</table> 

动态添加表行的javascript函数如下： 

function addRow(){ 
//添加一行 
var newTr = testTbl.insertRow(); 
//添加两列 
var newTd0 = newTr.insertCell(); 
var newTd1 = newTr.insertCell(); 
//设置列内容和属性 
newTd0.innerHTML = '<input type=checkbox id="box4">'; 
newTd2.innerText= '新加行'; 
} 

就这么简单，做点详细的说明： 
1、inserRow()和insertCell()函数 
insertRow()函数可以带参数，形式如下：
insertRow(index) 
这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。 
insertCell()和insertRow的用法相同。 

2、动态设置属性和事件 
上面行数中的innerHTML和innerText都是列的属性。 
这个inner，就是“inner”到<tb></tb>之间，innerText是添加到<tb></tb>之间的文本，innerHTML是添加到<tb></tb>之间的HTML代码(这个so简单，这个解释挺多余的) 
设置其他属性也是用同样的方式，比如，设置行背景色 
newTr.bgColor = 'red'; 
设置事件也一样，需要简单说明一点。 
比如，我要让点击新加行的时候执行一个自己定义的函数 newClick,newClick行数如下： 
function newClick(){ 
alert("这是新添加的行"); 
｝ 

对onclick事件设置这个函数的代码如下： 

newTr.onclick = newClick; 
这里需要主义的是，＝后面的部分必须是函数名,而且不能带引号， 
newTr.onclick = newClick(); 
newTr.onclick = 'newClick'; 
newTr.onclick = "newClick"; 
上面的写法都是错误的。 
为什么，其实知道为什么没有什么意思，知道怎么用就OK了，如果不想知道，可以跳过下面这一段。 
实际上这个=后面的newClick是指向自己定义的newClick函数的指针，javascript里面函数名就是指向函数的指针，加了引号括号什么的浏览器就找不到那个函数了。 
下面的写法，也是正确的 
newTr.onclick = function newClick(){ 
alert("这是新添加的行"); 
｝ 

这个使用函数名实际上是一样的