首頁 > 開發者 > JavaScript
<!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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
