js中对表格的操作总结

 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总是在变小，删除的行数总是会比预想的要少一半
  }
}

 

正确JS代码：

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

事例：

HTML代码：

< 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 >

 

JS代码：

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( " 删除成功！ " );
 }   
}