表格操作技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/selonteng/article/details/5036401

两个函数说明：

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>   用户组管理 <span οnclick="CloseDiv();" style="margin-
                                 left:200px;width:20px;cursor:hand"> </span></td>
          </tr>
          <tr>
            <td>用户组 ID</td>
            <td>用户组名 </td>
            <td>操作 <input type="button" οnclick="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' οnclick="deleteTheRow('row3');"></td>
            <td>操作 <input type="button" οnclick="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' οnclick=/"deleteTheRow('row"+id+"');/">";
cell3.innerHTML = "<input type='button' οnclick=/"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("删除成功！ ");
}
}

js中对表格的操作总结