站长论坛

标题: 常用的js动态增加（删除）table数据行的功能 [打印本页]
作者: superadmin    时间: 2008-10-29 17:27
标题: 常用的js动态增加（删除）table数据行的功能
在WEB项目中有些输入数据的地方，由于数据比较多，经常会遇到要求能动态的增加输入的行数，可以更便捷的往系统中录入数据。这时就经常会使用的通过javascript动态增加（或删除）table的1行。下面把以前自己用的例子贴出来，在ie和firefox下都可以正常运行，有兴趣的朋友也可以参考下。



例子example.html内容：
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">&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>  

<!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>


用到的autotable.js内容：
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;   
    }   
    //重新定义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.onclick=new Function("addTableRow(this.parentNode.parentNode.rowIndex);");   
    }   
    var delNames = document.getElementsByName(delTableRowName);   
    for(var i=0;i<delNames.length;i++){   
        delNames.onclick=new Function("delTableRow(this.parentNode.parentNode.rowIndex);");   
    }   
}



欢迎光临 站长论坛 (https://tzlink.com/bbs/) Powered by Discuz! X3.2