JavaScript動態添加刪除表格行列
上周因為手頭一個東西需要增加不定項目，左思右想沒有找到一個好的解決辦法。剛好舊友soot過來深圳，他給了我一個辦法，用
javascript動態添加刪除表格行的思路，并演示了一下，符合我的要求，于是拿出來與大家共分享
以下是我測試的代碼
<%
If Request("dd")<>"" Then
Response.write(Ubound(split(request("dd"),",")))
End If
%>
<html>
<head>
<script>
var i = 0;
function add() {
i++;
var tbl = document.all.tbl;
var tr = tbl.insertRow();
var td = tr.insertCell();
td.innerHTML = "<input name='dd' value = 'dd"+i+"'>"
}
</script>
</head>
<body>
<form method=post>
<table id=tbl>
<tr><td><input name="dd" value = "dd0"></td></tr>
</table>
<INPUT TYPE="button" value="add" onclick="add()">
<INPUT TYPE="submit" value="submit">
</form>
</html>
添加之后同時將值存在一個隱藏表單域中，以便提交時使用，使用數組方法接收值。
今日在網上搜索，發現一個網友的博客中也有相關代碼，于是帖過來一起參考。
<table id="idTB" border=0><!--注意id，與JS中的要相對應-->
<tr id=idTR>
<td>第一行 <input type='button'></td>
</tr>
</table>
<input type="button" onclick="addRow()" value="添加一行"><br>
<input type="button" onclick="delRow()" value="刪除一行"> Row index:<input id="idIndex">(<a id="idFirst">1</a>~<a id="idLast">1</a>)
<script>
function addRow(){//添加表格的一行
oTR=idTB.insertRow(idTB.rows.length);
tmpNum=oTR.rowIndex;
oTD=oTR.insertCell(0);
oTD.innerText="第" + tmpNum+"行";//在該處添加的HTML代碼會原封不動的顯示在頁面上
oTD.innerHTML="<input type='text' name='txt"+tmpNum+"'>";//要在該格添加的HTML代碼填在這里，因為這里是text，注意不要重名了。
idLast.innerText=idTB.rows.length;
if(idTB.rows.length>0)
idFirst.innerText='1';
return true;
}
function delRow(){//刪除表格的一行
sIndex=idIndex.value;
if(sIndex=='')
sIndex=idTB.rows.length-1;
else
sIndex=parseInt(sIndex)-1;
idTB.deleteRow(sIndex);
idLast.innerText=idTB.rows.length;
if(idTB.rows.length==0)
idFirst.innerText='0';
}
</script>