java table 增加行_Table动态增加删除行

增加行的实现：使用一个隐藏的Table(本例中是id为sourceTable)来作为模版，取出sourceTable的第一行，使用clone的方式来将每一列的内容赋值给需要插入行的table中，该方法如下：

//使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象

//talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作

functioninsertRow(targetTable,sourceTable)

{

varoTBODY= document.getElementById(targetTable).tBodies.item(0);

varoTBODYData = document.getElementById(sourceTable).tBodies.item(0);

varrowsCount = oTBODYData.rows.length;

for(vari=0;i

oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));

}

}删除行的实现：在每一行的最末尾有一个删除按钮，点击删除按钮则删除当前按钮所在的行，所以首先要获取该删除按钮的index，取删除按钮index的方法如下，该方法中要求删除按钮必须name属性：

//查询出将要删除的行所在的位置index

functiongetElementOrder(field){

vari = 0;

varorder = 0;

varelements = document.getElementsByName(field.name);

for(i=0;i

order++;

if(elements[i]==field){

break;

}

}

returnorder;

}以下是一个完整的例子，直接复制就可以使用了，如果用户的需求与例子有差别时，只需要将sourceTable即模版调整为用户的需求，并将targetTable的title做调整即可：

动态增加删除行的实例

//使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象

//talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作

functioninsertRow(targetTable,sourceTable)

{

varoTBODY= document.getElementById(targetTable).tBodies.item(0);

varoTBODYData = document.getElementById(sourceTable).tBodies.item(0);

varrowsCount = oTBODYData.rows.length;

for(vari=0;i

oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));

}

}

functiondeleteRow(Field,targetTable){

varfindex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的

document.getElementById(targetTable).deleteRow(findex);

}

//查询出将要删除的行所在的位置index

functiongetElementOrder(field){

vari = 0;

varorder = 0;

varelements = document.getElementsByName(field.name);

for(i=0;i

order++;

if(elements[i]==field){

break;

}

}

returnorder;

}

用户名密码年龄