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);
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总是在变小,删除的行数总是会比预想的要少一半
}
}
{
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 );
}
}
{
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 onclick ="CloseDiv();" style ="margin-
left:200px;width:20px;cursor:hand" > </ 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 >
< tr style ="background-image: url(../image/titlelan.gif);color:white" height =30 >
< td colspan =3 > 用户组管理 < span onclick ="CloseDiv();" style ="margin-
left:200px;width:20px;cursor:hand" > </ 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' ο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( " 删除成功! " );
}
}
// 表格增加行
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( " 删除成功! " );
}
}