Javascript实现动态表格
效果如下：
<script type="text/javascript">
function AddTR(){
//取得新增行数的ID值
var idval = document.getElementById("idval").value;
var table = document.getElementById("mytable"); //取得表格对象
//取得表格的行数
var index = table.rows.length;
var nextRow = table.insertRow(index);//取得表格的行对象
nextRow.setAttribute("id",idval);//设置td的属性
var firstTD = nextRow.insertCell();//取得添加行第一个列对象
firstTD.setAttribute("height","20px");//设置高度属性值
firstTD.innerHTML=idval;
var secondTD = nextRow.insertCell(); //取得添加行第二个列对象
secondTD.innerHTML="第"+idval+"行";
var thirdTD = nextRow.insertCell(); //取得添加行第三个列对象
thirdTD.setAttribute("align","center");
thirdTD.innerHTML=
"<a href='#' onclick='deleteTR("+idval+")'>删除</a>";
idval++;
document.getElementById("idval").value=idval;
}
function deleteTR(id){
var table = document.getElementById("mytable");//取得表格对象
var row = document.getElementById(id); //取得行对象
var index = row.rowIndex;//取得行数的索引值
table.deleteRow(index); //删除指定行
}
</script>
</head>
<body>
<div><a href="#" onclick="AddTR()">添加</a></div>
<table id="mytable">
<tr>
<th>id值</th>
<th>行数</th>
<th>操作</th>
</tr>
<tr id="1">
<td>1</td>
<td>第1行</td>
<td align="center"><a href="#" onclick="deleteTR(1)">删除
</a></td>
</tr>
</table>
<input type="hidden" value="2" id="idval"/>
</body>