Javascript 动态添加删除表格行

用JS实现动态添加或删除表格的行，有两种方法：

（1）添加：用HTML DOM Table对象的insertRow()方法创建TableRow对象，一个

                 TableRow对象代表一个<tr>标签，再调用TableRow对象的insertCell()方法

                 创建TableCell对象，一个TableCell对象代表一个<td>标签

       删除：同样用Table对象的deleteRow(index)，和TableRow对象deleteCell(index)

                方法删除各子对象

 (2)  添加：使用DOM 对象的createElement()方法，此方法可以创建绝大部分的HTML对

                 象，通过appendChild()方法将各个HTML对象嵌套在一起

       删除：用DOM对象的removeChild(obj)方法删除各子对象

示例：

表单HTML

<input type="button" value="添加"  οnclick="addRow('tab')"/>
<table width="350" height="36" border="1" id="tab">
    <tr>
        <th width="64" height="30" scope="col">姓名</th>
        <th width="204" scope="col">地址</th>
        <th width="60" scope="col">操作</th>
    </tr>
</table>

   //JS脚本--第一种方法

   <script type="text/javascript">
    //取得指定id的对象
    function getObj(id){
        return document.getElementById(id);
    }
    //添加行函数
    function addRow(tabName){
        //取得table的对象
        var tab=getObj(tabName);
        //添加行
        var row=tab.insertRow(tab.rows.length);
        //添加三列
        var nameCell=row.insertCell(row.cells.length);
        var addressCell=row.insertCell(row.cells.length);
        var buttonCell=row.insertCell(row.cells.length);
        //给name输入栏和address输入栏赋值
        nameCell.innerHHTML="张三";
        addressCell.innerHTML="北京";
        //在第三列加上删除当前列按钮        

        buttonCell.innerHTML='<input value="删

           除"type="button"οnclick="deleteRow(this)"/>';
    }
    //删除列函数，删除方法传入参数为行的索引
    function deleteRow(obj){
        var row=obj.parentNode.parentNode;
        var tab=row.parentNode;
        tab.deleteRow(row.rowIndex);
    }
</script>

   //JS脚本--第二种方法

   <script type="text/javascript">
    //取得指定id的对象
    function getObj(id){
        return document.getElementById(id);
    }
    //添加行函数
    function addRow(tabName){
        //取得table的对象
        var tab=getObj(tabName);
        //添加行
        var tr = document.createElement("tr");
        //添加三列
        var th=document.createElement("th");
        var td1=document.createElement("td");
        var td2=document.createElement("td");
        //给th,td1 赋值,给td2添加点击事件

        th.innerText="100";
        td1.innerText="张三";

        //如果是Mozilla系列，用addEventListener
        td2.attachEvent("onclick",deleteRow(this));
        //将th td1 td2赋给tr

        tr.appendChild(th);

        tr.appendChild(td1);

        tr.appendChild(td2);

        //将tr添加到table

        tab.appendChild(tr);

    }

    //删除列函数,删除方法传入参数为对象
    function deleteRow(obj){
        var row=obj.parentNode.parentNode;
        var tab=row.parentNode;
        tab.removeChild(row);
    } </script>