<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>
<div><b>DIV中的动态表增加行</b></div><br>
<div style="height:200;width:400;overflow:auto;">
<table id = "sourceTable" style="display:none;">
<tr>
<td><input type="button" name = "deleteButton" value="删除" onclick="deleteRow(this,'targetTable')"></td>
<td><input type="text" name="username"></td>
<td><input type="password" name ="password"></td>
<td><input type = "text" name= "age"></td>
</tr>
</table>
<!--如果添加align="center"竟然会影响DIV的位置，而居左、居右都没影响。---table id="targetTable" width="100%" align="center">
<table id="targetTable" width="100%">
<tr>
<td> </td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
</tr>
</table>
</div>
</body>
<input type="button" value="增加行" onclick="insertRow('targetTable','sourceTable');">
</html>
分享到：
相关推荐
JS动态添加删除HTML元素(实例)兼容性比较不错的js代码示例
js实现动态增加和删除表格的行和列。实例 js实现动态增加和删除表格的行和列。实例
JavaScript 实现在树形菜单中添加、删除节点实例 js note JavaScript实现在树形菜单中添加、删除节点实例，本程序侧重于学习，主要介绍一种在多级树节点中创建节点、删除节点，帮助了解树形菜单创作原理。
几种经典的jQuery动态增加删除表格的实例,还有一种传统javascript控制的表格增加删除的实例，这是总结了网络上比较好的几个版本提炼出来的。
1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...
主要介绍了JavaScript实现动态添加，删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下
本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码，供大家参考，具体内容如下 动态生成一个带删除行功能的表格： 实现思路 1、获取表格元素 2、获取要填充的数据，一般是从数据库取数据，也...
插入删除表格，用javascript实现，动态增加行和删除行，很简单。
用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能，接下来通过代码实例给大家介绍JavaScript实现动态添加删除表格的行，...
主要是对JavaScript动态操作表格实例(添加,删除行,列及单元格)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
最近做项目遇到这样的需求，要求表格添加一行，表格删除一行，表格遍历取值等。下面小编给大家带来了js动态添加表格逐行添加、删除、遍历取值的实例代码，需要的朋友参考下
本文实例为大家分享了js实现添加删除表格的具体代码，供大家参考，具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击事件 2、点击删除按钮 ...
下面小编就为大家带来一篇JS实现动态增加和删除li标签行的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式： 点击添加按钮可以添加一行： 点击删除可以删除本行： 基本功能是这样，下面是代码： <html> <...
flexigrid表格控件的使用实例，实现了和struts1.3的集成，实现了动态添加和删除。 文档包括： user_mgr.jsp ,jsp页面 UserAction.jsp ，控制层Action js包，相关的js jar使用到的jar包
主要介绍了Vue.js动态添加、删除选题的实例代码,非常不错具有参考借鉴价值，需要的朋友可以参考下