JS 动态操作表格

http://blog.csdn.net/long_carol/article/details/7356897

//动态添加行与列

function addHtml( )

        {
    var tab=document.getElementById("viewTabs"); //获得表格
    var colsNum=tab.rows.item(0).cells.length;   //表格的列数

     var num=document.getElementById("viewTabs").rows.length;//表格当前的行数

     var rownum=num-1;
      tab.insertRow(rownum);
        for(var i=0;i<colsNum-1; i++)
       {
          
           tab.rows[rownum].insertCell(i);//插入列
           tab.rows[rownum].cells[i].innerHTML="dfd";
         
       }
     tab.rows[rownum].insertCell(i);
            tab.rows[rownum].cells[i].innerHTML="ddddkk";
}

 //动态删除表格的行

function deleterow()
{
 
var lowNum;
 var num=document.getElementById("viewTabs").rows.length;
 alert(num);
 if(num==2)
 {
  lowNum=num-1;
 }
   var tb=document.getElementById("viewTabs");
  tb.deleteRow(lowNum);
}

//创建表格的行与列

<script type="text/JavaScript"> function add_table(){var table = document.createElement("table");var tbody = document.createElement("tbody");var tr = document.createElement("tr");var td = document.createElement("td");var content = document.createTextNode("我是个表格.");td.appendChild(content);tr.appendChild(td);tbody.appendChild(tr);table.appendChild(tbody);document.body.appendChild(table);}</script></head><body onload="add_table();"></body></html>
//删除当前行

在当前的列中写一个事件：如 <input  type="text" id="btnCans" onclick="delRow(this)"/>

function delRow(obj)
{
 var Row=obj.parentNode;
 var Row=obj.parentNode; //tr
 while(Row.tagName.toLowerCase()!="tr")
 {
  Row=Row.parentNode;
 }
 Row.parentNode.removeChild(Row); //删除行


}

方法2

http://www.cnblogs.com/wequst/archive/2010/02/02/1661709.html

inserRow()和insertCell()方法

首先，表格行索引从0开始。

 

inserRow()：
 这个函数将新行添加到index的那一行前，

比如insertRow(0),是将新行添加到第一行之前。

默认的insertRow()函数相当于 insertRow(-1)，将新行添加到表的最后。

objTable.insertRow (objTable.rows.length).就是为表格objTable在最后新增一行。

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

 

deleteRow()和deleteCell()方法
 deleteRow(index)：index从0开始

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

 

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

删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的

错误JS代码：

复制代码
function clearRow()
{
  objTable= document.getElementById("myTable");
  var length = objTable.rows.length
  for( var i=1; i<length ; i++ )
  {
     tblObj.deleteRow(i); 
     //应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半
  }
}
复制代码