常用的js动态增加（删除）table数据行的功能怎么在数组中增加一个事件
日期：2014-05-16 浏览次数：20440 次
常用的js动态增加（删除）table数据行的功能如何在数组中增加一个事件？
代码如下：
html:example.html
javascript:autotable.js
代码如下：
html:example.html
- HTML code
<!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>
javascript:autotable.js
- JScript code
//添加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();
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
