html中给table添加行和删除行（等）

一、案例：【动态生成Table的行、列以及删除等】

二、案例类别：【页面】

三、案例关键字：【Table】【Row】【TR】

四、案例模型：

动态的生成Table。

五、案例解释：

六、案例代码：

代码分成很多形式。现在只是介绍其中的几种：

一）动态插入行：

1、

function insert2tbl(x){

R=tbl.insertRow();

C=R.insertCell();

C.innerHTML="<td width='18%'><div align=center><input type='checkbox' checked /></div> </td>";

C=R.insertCell() ;

C.innerHTML="<td width='82%' id='td1'>"+x+"</td>" ;

}

此时每次执行向table中插入一条记录。

2、

function AddRow()
{
//添加一行
var newTr = tab1.insertRow();
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box4" on Click="GetRow()">';
newTd1.innerText= '新增加行';
}

见附1。

二）删除

1、删除除了第一行外的其他数据

function clearTbl(){

while(tbl.rows.length>1){

tbl.deleteRow();

}

七、案例心得及经验总结：

动态生成Table的行可以有利于我们与List嵌套使用。

八、实用案例：对应关系、动态选择

九、案例相关方法及拓展方法：

附1：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>动态添加删除表格</title>

<Script Language="Javascript">
var cGetRow=-99999;

function AddRow()
{
//添加一行
var newTr = tab1.insertRow();
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box4" on Click="GetRow()">';
newTd1.innerText= '新增加行';
}

function DelRow(iIndex)
{
//删除一行
if(iIndex==-99999)
alert("系统提示：没有选中行号!");
else
tab1.deleteRow(iIndex);
}

function GetRow()
{
//获得行索引
//两个parentElement分别是TD和TR哟，rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
}

function ShowRow()
{
//显示行号
alert(cGetRow);
//alert(document.getElementsByTagName("tr").length);
}

</script>
</head>

<body>
<table id="tab1" border=1>
<tr id="tr1">
<td width=6%><input type=checkbox id="box1" on Click="GetRow()"></td>
<td id="a">第一行</td>
</tr>
<tr id="tr2">
<td width=6%><input type=checkbox id="box2" on Click="GetRow()"></td>
<td id="b">第二行</td>
</tr>
<tr id="tr3">
<td width=6%><input type=checkbox id="box3" on Click="GetRow()"></td>
<td id="c">第三行</td>
</tr>
</table>

<input type="submit" name="Submit" value="AddRow" on click="javascript :AddRow();">
<input type="submit" name="Submit" value="DelRow" on click="javascript :DelRow(cGetRow);">
<input type="submit" name="Submit" value="ShowRow" on click="javascript :ShowRow();">
</body>
</html>

附 2：

<HTML>

<HEAD>

iIndex = 0; //试验一下加了int类型定义后如何？？？

var i= 0;

function showIndex(){

　alert(iIndex);

}

function getIndex(){

　iIndex = event.srcElement.parentElement.parentElement.rowIndex;

return iIndex;

}

function insertRow(iPos){

　var otr=myTable.insertRow(i);

　var ocell=otr.insertCell(0);

　ocell.innerHTML="<input type=file name=aa >"

　var ocell=otr.insertCell(1);

//　ocell.innerText="bb"

　ocell.innerHTML=" <input type=button onclick=deleteRow(getIndex()) value='删除"+ i +"'>";

i++;

}

function deleteRow(iPos){

　document.all.myTable.deleteRow(iPos);

i--;

}

</SCRIPT>

</HEAD>

<BODY>

</table>

<form>

</form>

</BODY>

</HTML>

附 3：

function deleteRow (tableID, rowIndex) {

var table =document.all[tableID]

table.deleteRow(rowIndex);

}

</script>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<HTML>

<HEAD>

iIndex = 0; //试验一下加了int类型定义后如何？？？

function showIndex(){

alert(iIndex);

}

function getIndex(){

iIndex = event.srcElement.parentElement.rowIndex;

}

function insertRow(iPos){

var otr=myTable.insertRow(iPos);

var ocell=otr.insertCell(0);

ocell.innerText="aa"

var ocell=otr.insertCell(1);

ocell.innerText="bb"

}

function deleteRow(iPos){

document.all.myTable.deleteRow(iPos);

}

</SCRIPT>

</HEAD>

<BODY>

</tr>

</tr>

</table>

<form>

</form>

</BODY>

</HTML>