稻草屋
疯行天下
动态添加、删除行,分别通过insertRow,deleteRow方法实现,显示行号,通过rowIndex属性获得,基本可以动态实现相关功能。原代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" onClick="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" onClick="GetRow()"></td>
  <td id="a">第一行</td>
   </tr>
   <tr id="tr2">
  <td width=6%><input type=checkbox id="box2"  onClick="GetRow()"></td>
  <td id="b">第二行</td>
   </tr>
   <tr id="tr3">
  <td width=6%><input type=checkbox id="box3"  onClick="GetRow()"></td>
  <td id="c">第三行</td>
  </tr>
</table>

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

posted on 2009-08-06 18:54  子谦  阅读(550)  评论(0编辑  收藏  举报