夏日博客

A-A+

javascript中实现表格增删实现代码

2016年01月28日 前端设计 暂无评论 阅读 6 views 次

下面我们结合html与javascript实现动态增加与删除表格行与表格列的程序,有需要的朋友可参考参考.

例1,代码如下:

  1. <script>  
  2. function addRow(){  
  3.       
  4.     // 插入一行  
  5.     myNewRow = document.all.myTable.insertRow();  
  6.     var lenRow = document.all.myTable.rows.length; // 计算总行数  
  7.       
  8.     if(lenRow > 1){          
  9.         var point = myNewRow.rowIndex;    // 计算当前行位置      
  10.         var lenCol = document.all.myTable.rows(0).cells.length; // 计算每行有几列  
  11.           
  12.         // 插入lenCol个td  
  13.             for (i=0; i < lenCol; i++) {  
  14.                 document.all.myTable.rows(point).insertCell();  
  15.                 document.all.myTable.rows(point).cells(i).innerHTML = parseFloat(document.all.myTable.rows(point-1).cells(i).innerHTML) + lenCol;  
  16.         }  
  17.     }else if(lenRow == 1){  
  18.         // 原来table是0行，初始化一行  
  19.         for(i = 0; i < 10; i++){  
  20.             document.all.myTable.rows(0).insertCell();  
  21.             document.all.myTable.rows(0).cells(i).innerHTML = i;  
  22.         }  
  23.     }      
  24. }  
  25. function delRow(){  
  26.     document.all.myTable.deleteRow();  
  27. }  
  28. </script>  
  29. <a href="javascript: addRow()">增加一行</a>  
  30. <a href="javascript: delRow()">减去一行</a>  
  31. <table name=myTable border=1 id=myTable>  
  32. </table>  

例2,代码如下:

  1. <HTML>   
  2. <TITLE>Form Object example</TITLE>   
  3. <HEAD>   
  4. <script language="javascript">   
  5. function delrow1()   
  6. {   
  7. var oElement=event.srcElement;   
  8. while(oElement.tagName!="TR")   
  9. {   
  10. oElementoElement=oElement.parentElement;   
  11. }   
  12. var oTBody=oElement.parentElement;   
  13. oTBody.removeChild(oElement)   
  14. }  
  15.    
  16. function delrow2()//?h除当前行   
  17. {   
  18. var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;   
  19. document.all.yltable.deleteRow(currRowIndex);//table10--表格id   
  20. }   
  21. function insertrow1() //增加的一行方法1   
  22. {   
  23. var newnode = document.getElementById('yltable').lastChild.cloneNode(true);   
  24. document.getElementById('yltable').appendChild(newnode);   
  25. }  
  26. function insertrow2() //增加的一行方法2   
  27. {   
  28. newRow=document.all.yltable.insertRow(-1);   
  29. var j_1 = document.all.yltable.rows.length;   
  30. newcell=newRow.insertCell();   
  31. newRow.bgColor='#FFFFFF';   
  32. newcell.align='center';   
  33. newcell.innerHTML=""+j_1+"";  
  34.   
  35. newcell=newRow.insertCell() ;   
  36. newRow.bgColor='#FFFFFF';  
  37. newcell.align='center';   
  38. newcell.innerHTML="<input type='text' name='ylText"+j_1+"' />";  
  39.   
  40. newcell=newRow.insertCell() ;   
  41. newRow.bgColor='#FFFFFF';  
  42. newcell.align='center';  
  43. newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">';  
  44. document.all.yltable.focus();  
  45. }  
  46. function inserttable()   
  47. {   
  48. var newnode = document.getElementById('yltable').cloneNode(true);   
  49. document.getElementById('ylform').appendChild(newnode);   
  50. }   
  51. </script>   
  52. </HEAD>   
  53. <BODY>   
  54. <form name="ylform" id="ylform">   
  55. <center>   
  56. <input name="button" type="button" onClick="inserttable()" value="增加表格">   
  57. <input name="button2" type="button" onClick="insertrow1()" value="增加一行1">  
  58. <input name="button22" type="button" onClick="insertrow2()" value="增加一行2">   
  59. </center>  
  60.   
  61. <div style="overflow-y:auto; overflow-x:visible;width:85%;height:150px">  
  62. <table border="1" align="center" width="50%" id="yltable">   
  63.   <TBODY id=yl1>   
  64.     <tr>   
  65.     <td width="30%" height="22"><div align="center">1</div></td>   
  66.     <td width="40%">   
  67.     <div align="center">   
  68.     <input name="textfield" type="text" value="yl">   
  69.     </div></td>   
  70.     <td width="30%"><div align="center">   
  71.     <input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">   
  72.     </div></td>   
  73.     </tr>   
  74.   </TBODY>   
  75.   <TBODY id=yl2>   
  76.     <tr>   
  77.     <td><div align="center">2</div></td>   
  78.     <td><div align="center">   
  79.     <input name="textfield2" type="text" value="yanleigis">   
  80.     </div></td>   
  81.     <td><div align="center">   
  82.     <input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">   
  83.     </div></td>   
  84.     </tr>   
  85.   </TBODY>   
  86.   <TBODY id=yl3>   
  87.     <tr>   
  88.     <td ><div align="center">3</div></td>   
  89.     <td ><div align="center">   
  90.     <input name="textfield22" type="text" value="Landgis@126.com">   
  91.     </div></td>   
  92.     <td ><div align="center">   
  93.     <input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">   
  94.     </div></td>   
  95.     </tr>   
  96.   </TBODY>   
  97. </table>   
  98. </div>  
  99.   
  100. <center>   
  101. </center>   
  102. </form>   
  103. </BODY>   
  104. </HTML>  
标签：

给我留言