js 对table表格的操作

本文详解了js中对table表格的详细操作方法，包括插入行列和删除行列。

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; //这个属性可以取得row的索引值
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总是在变小，删除的行数总是会比预想的要少一半
  }
}

    正确JS代码：

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

    实例：

<table width=100% cellpadding=0 cellspacing=0 style="font-size:13px" id="usergrouptable">
  <tr style="background-image: url(../image/titlelan.gif);color:white" height=30 >
    <td colspan=3>&nbsp;&nbsp;&nbsp;用户组管理<span onclick="CloseDiv();" style="margin-left:200px;width:20px;cursor:hand">&nbsp;</span></td>                         
  </tr>
  <tr>
    <td>用户组ID</td>
    <td>用户组名</td>
    <td>操作<input type="button" onclick="AddRow('usergrouptable');" value="+"></td>
  </tr>
  <tr id="row3">
    <td><input type=text id='txti3'  class='textStyle'> </td>
    <td><input type=button id='del3' value='删除' align='absmiddle' onclick="deleteTheRow('row3');"></td>
    <td>操作<input type="button" onclick="AddRow('usergrouptable');" value="+"></td>
  </tr>
</table>
var id= 4;
//表格增加行
function AddRow(tablename)
{   
 var tab=document.getElementById(tablename);    
 var row=tab.insertRow(-1);
 /*添加行id*/
 row.id="row"+id;
 var cell1=row.insertCell(-1);
 var cell2=row.insertCell(-1);
 var cell3=row.insertCell(-1);
 cell1.innerHTML = "<input type='text' id='txti"+id+"'  class='textStyle' value="+id+">";
 cell2.innerHTML = "<input type=button id='del"+id+"' value='删除' align='absmiddle'  onclick=\"deleteTheRow('row"+id+"');\">";
 cell3.innerHTML = "<input type='button' onclick=\"AddRow('usergrouptable');\" value='+'>";
 id++;
}

//删除行
function deleteTheRow(rowid)
{
 if(confirm("确定删除此项吗？"))
 {
  var tab = document.getElementById("usergrouptable");
  var row = document.getElementById(rowid);
  var inx = row.rowIndex;/*获得行号rowIndex*/
  //var inx = document.getElementById("del3").parentElement.parentElement.rowIndex;
  tab.deleteRow(inx);/*删除此行*/
  alert("删除成功！");
 }   
}