在WEB项目中有些输入数据的地方，由于数据比较多，经常会遇到要求能动态的增加输入的行数，可以更便捷的往系统中录入数据。这时就经常会使用的通过javascript动态增加（或删除）table的1行。下面把以前自己用的例子贴出来，在ie和firefox下都可以正常运行，有兴趣的朋友也可以参考下。
实例图如下：
例子example.html内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>动态表格</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="default.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" src="autotable.js"></script>
</head><body bgcolor="#FFFFFF" topmargin="15px" leftmargin="5px" rightmargin="5px">
<center><b>动态表格</b></center>
<script>
//定义动态表的id
var autoTableId="idMultiTable";
//定义动态表中每一行的数据
var autoTableRowData=new Array(
'<a href="#" name="deleteRow">删除</a>',
'<input type="text" size="12" name="name" id="name" value="">',
'<input type="text" size="35" name="address" id="address" value="">',
'<a href="#" name="insertRow">添加</a>'
);
//定义添加按钮的name属性
var addTableRowName="insertRow";
//定义删除按钮的name属性
var delTableRowName="deleteRow";
</script>
<table class="tabelBoder" id="idMultiTable" width="100%" align="center" cellspacing="0" cellpadding="3" border="0">
<tr height="30" class="RH1">
<td width="4%" align="left"> </td>
<td width="17%" align="left">姓名</td>
<td width="23%" align="left">地址</td>
<td width="11%" align="left"> </td>
</tr>
<tr class="N1" onmouseover="this.className='N2'" onmouseout="this.className='N1'">
<td class="DN"><a href="#" name="deleteRow">删除</a></td>
<td class="DN"><input type="text" size="12" name="name" id="name" value="" ></td>
<td class="DN"><input type="text" size="35" name="address" id="address" value="" ></td>
<td class="DN"><a href="#" name="insertRow">添加</a></td>
</tr>
</table>
<table width="100%" align="center" cellspacing="0" cellpadding="3" border="0">
<tr height="30"><td align="left" ><input type="button" name="button" class="btn" value="添加" onclick="addTableRow(-1);"></td></tr>
</table>
<script>setAddFunction();</script>
</body></html>
用到的autotable.js内容：
//添加1行
function addTableRow(rowIndex)
{
var tbobj=document.getElementById(autoTableId);
var trobj,tdobj;
if(rowIndex==-1){
trobj=tbobj.insertRow(-1);
}else{
trobj=tbobj.insertRow(rowIndex+1);
}
trobj.className="N1";
trobj.onmouseover=new Function("this.className='N2';");
trobj.onmouseout=new Function("this.className='N1';");
for(var i=0;i<autoTableRowData.length;i++){
tdobj=trobj.insertCell(-1);
tdobj.className="DN";
tdobj.innerHTML=autoTableRowData[i];
}
//重新定义onclick事件
setAddFunction();
}
//删除1行
function delTableRow(rowIndex){
var tbobj=document.getElementById(autoTableId);
if(rowIndex==-1){
if(tbobj.rows.length>1){
tbobj.deleteRow(tbobj.rows.length-1);
}
}else{
tbobj.deleteRow(rowIndex);
}
}
//定义添加和删除动态行的onclick方法
function setAddFunction(){
var addNames = document.getElementsByName(addTableRowName);
for(var i=0;i<addNames.length;i++){
addNames[i].onclick=new Function("addTableRow(this.parentNode.parentNode.rowIndex);");
}
var delNames = document.getElementsByName(delTableRowName);
for(var i=0;i<delNames.length;i++){
delNames[i].onclick=new Function("delTableRow(this.parentNode.parentNode.rowIndex);");
}
}
附件：本文使用的例子全部在最后的压缩包zip（autotable.zip）中。
------------------------------------------
分享知识，分享快乐，希望文章能给需要的朋友带来小小的帮助。
- 大小: 6.4 KB
分享到：
相关推荐
使用javascript实现table动态增加删除行列。
通过js来操作table行的动态添加删除，进行相关的操作
主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
下拉框的内容通过js的insertRow插入到table中,通过delRow删除table中的行
vue列表数据删除后主动刷新页面及刷新方法详解 前端删除一条数据或者新增数据后，后端操作成功，但前端不会自动刷新，需要重新刷新当前页面 （用vue-router重新路由到当前页面，页面是不进行刷新的 ,采用window....
本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码，供大家参考，具体内容如下 这里用到是设置一个弹出框来实现此功能，还有一种方法是直接在原来的基础上面进行修改 效果如下： 表格的table：...
3.动态添加节点/动态删除节点/动态移动节点 4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格...
分享一款原生js table表格自动排序效果，个人感觉很好用
主要介绍了操作Table--动态添加删除表格及数据实现代码，有需要的朋友可以参考一下
在前端开发中遇到这样的问题，对于table指定行的数据进行删除，花了好长时间才解决，今天小编抽时间给大家介绍BootStrap table删除指定行的注意事项，需要的朋友参考下吧
vue动态表格添加删除数据代码是一款输入用户名和年龄自由添加用户信息表格，可以删除用户信息，支持批量全部删除表格数据代码。
用js实现的删除table中一行数据的代码
纯js的树形菜单(添加删除节点)动态添加父节点子节点。jquery实现
最近做项目遇到这样的需求，要求表格添加一行，表格删除一行，表格遍历取值等。下面小编给大家带来了js动态添加表格逐行添加、删除、遍历取值的实例代码，需要的朋友参考下
支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现 最新版本下载主页: http://sourceforge.net/projects/tabletree4j/files/ 百度...
主要介绍了javascript清空table表格的方法,涉及javascript操作table表格的技巧,需要的朋友可以参考下
js动态构建可以置顶、置底、上移、下移、添加、删除的table，
效果： 代码： 代码如下:<head runat=”server”> <title></title> <style type=”text/css”> tr { height: 30px;... [removed] [removed] = function () { var oName = document....
Layui调用json获取表格动态数据代码，treetable是一款功能强大的树形表格插件，支持全部展开，全部折叠，刷新表格，修改，删除等功能。