Table动态增加删除行
//使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象
//talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作
function insertRow(targetTable,sourceTable)
{
var oTBODY = document.getElementById(targetTable).tBodies.item(0);
var oTBODYData = document.getElementById(sourceTable).tBodies.item(0);
var rowsCount = oTBODYData.rows.length;
for(var i=0;i<rowsCount;i++){
oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));
}
}
删除行的实现：在每一行的最末尾有一个删除按钮，点击删除按钮则删除当前按钮所在的行，所以首先要获取该删除按钮的index，取删除按钮index的方法如下，该方法中要求删除按钮必须name属性：
// 查询出将要删除的行所在的位置index
function getElementOrder(field){
var i = 0;
var order = 0;
var elements = document.getElementsByName(field.name);
for(i=0;i<elements.length;i++){
order++;
if(elements[i]==field){
break;
}
}
return order;
}
以下是一个完整的例子，直接复制就可以使用了，如果用户的需求与例子有差别时，只需要将sourceTable即模版调整为用户的需求，并将targetTable的title做调整即可：
<html>
<head>
<title>动态增加删除行的实例</title>
<script language="javascript">
//使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象
//talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作
function insertRow(targetTable,sourceTable)
{
var oTBODY = document.getElementById(targetTable).tBodies.item(0);
var oTBODYData = document.getElementById(sourceTable).tBodies.item(0);
var rowsCount = oTBODYData.rows.length;
for(var i=0;i<rowsCount;i++){
oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));
}
}
function deleteRow(Field,targetTable){
var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的
document.getElementById(targetTable).deleteRow(findex);
}
// 查询出将要删除的行所在的位置index
function getElementOrder(field){
var i = 0;
var order = 0;
var elements = document.getElementsByName(field.name);
for(i=0;i<elements.length;i++){
order++;
if(elements[i]==field){
break;
}
}
return order;
}
</script>
</head>
<body>
<table id = "sourceTable" style="display:none;">
<tr>
<td><input type="text" name="username"></td>
<td><input type="password" name ="password"></td>
<td><input type = "text" name= "age"></td>
<td><input type="button" name = "deleteButton" value="删除" onclick="deleteRow(this,'targetTable')"></td>
</tr>
</table>
<table id="targetTable">
<tr>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td> </td>
</tr>
<tfoot>
<tr>
<td colspan="4" align="right"><input type="button" value="增加行" onclick="insertRow('targetTable','sourceTable');"></td>
</tr>
</tfoot>
</table>
<body>
</html>