代码如下:
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"> </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.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的长度!
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"> </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.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的长度!
解决方案 »
- 关于js中图片链接中文名乱码的问题
- 急求列表显示组件
- 请问如何用 windows media player 插件获取当前播放时间?
- 高手帮忙解释下<script type="text/javascript" src="../ckeditor/ckeditor.js?t=B37D54V">
- with的缺点
- 12306的出发地、目的地的拼音或汉字的模糊匹配全国区县如何实现的?
- 新人问题,为什么在onclick="return false"中加入函数,它就会跳转,不加就不跳
- 怎么样使<input type="text">的长度随着输入的文字的增长而变动
- 全局变量的定义,急。。。。。
- 如何设置js文件编码为utf-8
- js 问题
- 急!!!正则验证运算公式?
这样行吗?
还有一个问题就是:name为address的input标签的id可不可以随着行数的增加变成address,address1,address2....,addressi,i为行数!