代码如下:
html:example.htmlHTML 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">&nbsp;</td>
<td width="17%" align="left">姓名</td>
<td width="23%" align="left">地址</td>
<td width="11%" align="left">&nbsp;</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.jsJScript 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.cssCSS 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;}我想在HTML的这个方法中: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为address的input标签中加上一个事件来限制每动态增加一行的address的长度!

解决方案 »

  1.   

    <input type="text" size="35" name="address" id="address" value="" maxlength="20">'
    这样行吗?
      

  2.   

    你的这些代码需改进,在firefox中无法运行的!
      

  3.   

    <input type="text" size="35" name="address" id="address" value="" maxlength="20" ondblclick="alert(this.value.length);" >我加了双击事件,ie下没发现什么问题?
      

  4.   

    name为address的input标签中加上一个事件来限制每动态增加一行的address的长度!具体什么意思?
      

  5.   

    在客户端需要验证用户输入数据的长度!同时可以录入多行,在每一行中都需要验证每个表单的长度!
    还有一个问题就是:name为address的input标签的id可不可以随着行数的增加变成address,address1,address2....,addressi,i为行数!
      

  6.   

    i为行数,这个得在删除行时将删除行以下行减1,添加行时直接设成"address"+tab.rows()