<html>
<!---------------------------------------------------------------
-- 动态 表格
-- 此注释方法值得学习
-- 2007-07-25
---------------------------------------------------------------->
<head>
<title>动态添加</title>
<script language="javascript">
function addHtml(r)
{
//alert(r);
var tab = document.getElementById("tb") ;
var colsNum = tab.rows.item(0).cells.length ;
var row = document.getElementById("tb");
var rownum ;
if(r!=0)
{
rownum = r + 1;
}
else
{
//获得当前得行数
var num = document.getElementById("tb").rows.length;
//使添加得新行在表格底部
rownum = num - 1;
}
row.insertRow(rownum);
var i=0;
for(;i<colsNum-1;i++)
{
//最大值
row.rows[rownum].insertCell(i);
row.rows[rownum].cells[i].innerHTML="<input type='text' name='test' value=''/>";
}
row.rows[rownum].insertCell(i);
row.rows[rownum].cells[i].innerHTML="<input type='button' value='+' onclick='addHtml("+rownum+")'/><input type='button' value='-' onclick='deleterow("+rownum+")'/>";
}
function deleterow(rnum)
{
var num = document.getElementById("tb").rows.length;
if(rnum != num)
{
var aa = num - rnum ;
if(aa == 1)
{
//防止删除最后一行
rnum = rnum - 1;
}
if(confirm('你确定要删除吗？'))
{
var tbody = document.getElementById("tb");
tbody.deleteRow(rnum);
}
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="50%" border="1" align="center" id="test">
<tbody id="tb">
<tr>
<td>姓名</td><td>性别</td><td>单位</td><td>身份证号</td>
<td> </td>
</tr>
<tr>
<td colspan="5" align="right" valign="middle">
<input type="button" name="Submit2" value="Add" onclick="addHtml(000)"/>
<input type="submit" name="Submit" value="保存" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>