javascript 动态增加行/列，动态删除行/列

利用js动态创建表格有两种方式：appendChild() 与 insertRow()+insertCell()。两种方式其实差不多，但第一种方式可能在IE上有问题，所以推荐第二种。

例子

1、insertRow() 与 insertCell()

insertRow()函数可以带参数，形式如下：

insertRow(index)：index从0开始 

insertRow()函数可以带参数，形式如下：

insertRow(index)：index从0开始 。

一般我们在使用的时候都是：objTable.insertRow(objTable.rows.length)，相当于在表格objTable最后新增一行。

insertCell()和insertRow的用法相同，这里就不再说了。

insertCell()和insertRow的用法相同，这里就不再说了。

2、deleteRow()和deleteCell()方法

deleteRow()函数可以带参数，形式如下：deleteRow(index)：index从0开始

和上面两个方法差不多的意思，就是删除指定位置的行和单元格。要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：

var row=document.getElementById("行的Id");
var index=row.rowIndex;//有这个属性，嘿嘿 

objTable.deleteRow(index);

另外也可以通过document.getElementById("行的Id").removeNode();来进行删除

//特别注意：removeNode()只在IE下有效，在firefox chrome下均无效，需要使用removeChild替代

//removeNode(true):innerText也删除；
 //removeNode(false):innerText保留

在使用过程中我碰到的一个问题跟大家说一下，就是删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的，所以如果你要删除表格的所有行，下面的代码是错误的：

function clearRow(){
   objTable= document.getElementById("myTable");
     
   for( var i=1; i<objTable.rows.length ; i++ )
   {
   tblObj.deleteRow(i);   
      }
} 

这段代码要删除原来的表格的表体，有两个问题。首先不能是deleteRow(i)，应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半，所以正确的删除表格的行的代码应该这样：

function clearRow(){

   objTable = document.getElementById("myTable");

   var length = ojbTable.rows.length;

   for( var i = 1 ;i < length ; i++){

       objTable.deleteRow(0);

}

}

3、动态设置表格属性

语法：obj.setAttribute("attribute",值)

例子：<span style="font-family: Arial, Helvetica, sans-serif;">document.getElementById("border").onclick = function () {</span>

            document.getElementById("tableid").setAttribute("bordercolor","red");
        }

4、动态添加表格

var tr = table.insertRow(2);//在下标为2的行前添加一行
            for( var i = 0 ; i < 4 ; i++){
                var td = tr.insertCell(i);
                //td.innerText= '新加行';//firefox下无效
                td.innerHTML = "呢";//
            }