常用的js动态增加（删除）table数据行的功能如何在数组中增加一个事件？
代码如下：
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>//定义动态表的idvar 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();}//删除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);"); }}
css:default.css
- CSS code
body,p,input,select,textarea,table,tr,td{ font-family:verdana,tahoma; font-size:11px;}a:link,a:visited {color:#5588B6;padding:2px;cursor:pointer;text-decoration:underline;}a:hover {color:#5588B6;padding:2px;cursor:pointer;background:#F3E99E;border:1px solid #008000;text-decoration:none;}.btn { border-right: #7b9ebd 1px solid; padding-right: 2px; border-top: #7b9ebd 1px solid; padding-left: 2px; margin:2px; font-size: 11px; border-left: #7b9ebd 1px solid; cursor: pointer; color: #111; padding-top: 2px; border-bottom: #7b9ebd 1px solid;}TR.RH1{BACKGROUND-COLOR:#B0C4DE;}TR.N1{BACKGROUND-COLOR:#FFFFFF;}TR.N2{BACKGROUND-COLOR:#CCCCCC;}.tabelBoder{border:1px solid #008000;}截图：
问题如下：
如何在每个地址input标签中加一个事件：来限制字符的数量?
[解决办法]
var autoTableRowData=new Array(
'<a href="#" name="deleteRow">删除</a>',
'<input type="text" size="12" name="name" id="name" value="" onkeyup="CheckLen(this);">',
'<input type="text" size="35" name="address" id="address" value="" onkeyup="CheckLen(this);">',
'<a href="#" name="insertRow">添加</a>'
);
直接放进HTML字串里
[解决办法]
- JScript code
var autoTableRowData=new Array(' <a href="#" name="deleteRow">删除 </a>',' <input type="text" size="12" name="name" id="name" value="" [color=#FF0000]onkeyup="CheckLen(this);" onkeydown="CheckLen(this);" onfocus="CheckLen(this);[/color]" >',' <input type="text" size="35" name="address" id="address" value="" [color=#FF0000]onkeyup="CheckLen(this);" onkeydown="CheckLen(this);" onfocus="CheckLen(this);" [/color]>',' <a href="#" name="insertRow">添加 </a>');