js动态添加表格行

js动态添加表格行方法

表格部分代码如下：

<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.row();
    //添加两列
    var newtd0 = newtr.cell();
    var newtd1 = newtr.cell();
    //设置列内容和属性
    newtd0.innerhtml = '<input type=checkbox id="box4">';
    newtd2.innertext = '新加行';
}

就这么简单，做点详细的说明：
1、inserrow()和cell()函数
row()函数可以带参数，形式如下：
row(index)
这个函数将新行添加到index的那一行前，比如row(0),是将新行添加到第一行之前。默认的row()函数相当于row(-1),将新行添加到表的最后。
cell()和row的用法相同。
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("这是新添加的行");
｝

这个使用函数名实际上是一样的
设置其他的事件用法相同。