一、案例：     【动态生成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：
<HEAD>
<script LANGUAGE="JAVASCRIPT">
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 id="myTable" border=1 width=600 >
</table>
<form>
<input type=button onclick="alert(iIndex)" value="show Index">
<input type=button onclick="insertRow(0)"　 value="插入行">
</form>
</BODY>
</HTML>
 
附 3：
<script>
function deleteRow (tableID, rowIndex) {
var table =document.all[tableID]
table.deleteRow(rowIndex);
}
</script>
<table id=mxh border=1>
<tr>
<td>第1行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
<tr>
<td>第2行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
<tr>
<td>第3行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
<tr>
<td>第4行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
</table>
 
 
<HEAD>
<script LANGUAGE="JAVASCRIPT">
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>
<table id="myTable" border=1>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
</table>
<form>
<input type=button onclick="alert(iIndex)" value="show Index">
<input type=button onclick="insertRow(iIndex)" value="插入行">
<input type=button onclick="deleteRow(iIndex)" value="删除行">
</form>
</BODY>
</HTML>