动态添加表格行
文/Ray
表格部分代码如下：
<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("这是新添加的行");
｝
这个使用函数名实际上是相同的
配置其他的事件用法相同。
以上内容由 华夏名网 收集整理，如转载请注明原文出处，并保留这一部分内容。
| “华夏名网” http://www.sudu.cn 和 http://www.bigwww.com 是成都飞数科技有限公司的网络服务品牌，专业经营虚拟主机,域名注册，VPS,服务器租赁业务。公司创建于2002年，经过近5年的高速发展，“华夏名网”已经成为我国一家知名的互联网服务提供商，被国外权威机构webhosting.info评价为25大IDC服务商之一。 |