代码改变世界

动态表格（转）

2014-01-03 14:08  夜半花开  阅读(269)  评论(0)  编辑  收藏  举报

转自：http://stephen830.iteye.com/blog/258861

在WEB项目中有些输入数据的地方，由于数据比较多，经常会遇到要求能动态的增加输入的行数，可以更便捷的往系统中录入数据。这时就经常会使用的通过javascript动态增加（或删除）table的1行。下面把以前自己用的例子贴出来，在ie和firefox下都可以正常运行，有兴趣的朋友也可以参考下。 

实例图如下： 

 

例子example.html内容： 

Html代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html><head><title>动态表格</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  3. <link href="default.css" type="text/css" rel="stylesheet" />  
  4. <script language="JavaScript" src="autotable.js"></script>  
  5. </head><body bgcolor="#FFFFFF" topmargin="15px" leftmargin="5px" rightmargin="5px">       
  6. <center><b>动态表格</b></center>  
  7. <script>  
  8. //定义动态表的id  
  9. var autoTableId="idMultiTable";  
  10. //定义动态表中每一行的数据  
  11. var autoTableRowData=new Array(  
  12. '<a href="#" name="deleteRow">删除</a>',  
  13. '<input type="text" size="12" name="name" id="name" value="">',  
  14. '<input type="text" size="35" name="address" id="address" value="">',  
  15. '<a href="#" name="insertRow">添加</a>'  
  16. );  
  17. //定义添加按钮的name属性  
  18. var addTableRowName="insertRow";  
  19. //定义删除按钮的name属性  
  20. var delTableRowName="deleteRow";  
  21. </script>  
  22.                   
  23. <table class="tabelBoder" id="idMultiTable" width="100%" align="center" cellspacing="0" cellpadding="3" border="0">  
  24. <tr height="30" class="RH1">  
  25. <td width="4%" align="left">&nbsp;</td>  
  26. <td width="17%" align="left">姓名</td>  
  27. <td width="23%" align="left">地址</td>  
  28. <td width="11%" align="left">&nbsp;</td>  
  29. </tr>  
  30. <tr class="N1" onmouseover="this.className='N2'" onmouseout="this.className='N1'">  
  31. <td class="DN"><a href="#" name="deleteRow">删除</a></td>  
  32. <td class="DN"><input type="text" size="12" name="name" id="name" value="" ></td>  
  33. <td class="DN"><input type="text" size="35" name="address" id="address" value="" ></td>  
  34. <td class="DN"><a href="#" name="insertRow">添加</a></td>  
  35. </tr>  
  36. </table>  
  37. <table width="100%" align="center" cellspacing="0" cellpadding="3" border="0">  
  38. <tr height="30"><td align="left" ><input type="button" name="button" class="btn" value="添加" onclick="addTableRow(-1);"></td></tr>  
  39. </table>  
  40. <script>setAddFunction();</script>  
  41. </body></html>  



用到的autotable.js内容： 

Js代码  收藏代码
    1. //添加1行  
    2. function addTableRow(rowIndex)  
    3. {  
    4.     var tbobj=document.getElementById(autoTableId);  
    5.     var trobj,tdobj;  
    6.     if(rowIndex==-1){  
    7.         trobj=tbobj.insertRow(-1);  
    8.     }else{  
    9.         trobj=tbobj.insertRow(rowIndex+1);  
    10.     }  
    11.     trobj.className="N1";  
    12.     trobj.onmouseover=new Function("this.className='N2';");  
    13.     trobj.onmouseout=new Function("this.className='N1';");  
    14.     for(var i=0;i<autoTableRowData.length;i++){  
    15.         tdobj=trobj.insertCell(-1);  
    16.         tdobj.className="DN";  
    17.         tdobj.innerHTML=autoTableRowData[i];  
    18.     }  
    19.     //重新定义onclick事件  
    20.     setAddFunction();  
    21. }  
    22. //删除1行  
    23. function delTableRow(rowIndex){  
    24.     var tbobj=document.getElementById(autoTableId);  
    25.     if(rowIndex==-1){  
    26.         if(tbobj.rows.length>1){  
    27.             tbobj.deleteRow(tbobj.rows.length-1);  
    28.         }  
    29.     }else{  
    30.         tbobj.deleteRow(rowIndex);  
    31.     }  
    32. }  
    33. //定义添加和删除动态行的onclick方法  
    34. function setAddFunction(){  
    35.     var addNames = document.getElementsByName(addTableRowName);  
    36.     for(var i=0;i<addNames.length;i++){  
    37.         addNames[i].onclick=new Function("addTableRow(this.parentNode.parentNode.rowIndex);");  
    38.     }  
    39.     var delNames = document.getElementsByName(delTableRowName);  
    40.     for(var i=0;i<delNames.length;i++){  
    41.         delNames[i].onclick=new Function("delTableRow(this.parentNode.parentNode.rowIndex);");  
    42.     }  
    43. }