论坛首页 → 入门技术论坛 →

动态添加和删除表单元素

浏览 2930 次
锁定老帖子 主题：动态添加和删除表单元素
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • dikar
  • 等级: 初级会员
  • 性别:
  • 文章: 40
  • 积分: 50
  • 来自: 杭州
   发表时间：2007-11-26  
xml 代码
  1. 也许是遇到的问题都是这样的，因此我把在IE下和FF下分别写的可以动态添加和删除表单元素的代码拿来与大家一起分享。   
  2. 首先看看IE下的例子   
  3. <script>  
  4.   
  5. var id=2;   
  6.   
  7. function add()   
  8. {   
  9.   
  10. var newRadioButton = document.createElement("<br>")   
  11. newRadioButton.setAttribute("id",id);   
  12. document.body.insertBefore(newRadioButton);   
  13.   
  14. newRadioButton = document.createElement("<INPUT NAME='text'>")   
  15. newRadioButton.setAttribute("id",id);   
  16. document.body.insertBefore(newRadioButton);   
  17.   
  18.     
  19. newRadioButton = document.createElement("<INPUT TYPE='button' NAME='DEL' VALUE='DEL' onclick='del(id)'>")   
  20. newRadioButton.setAttribute("id",id);   
  21. document.body.insertBefore(newRadioButton);   
  22.     
  23. newRadioButton = document.createElement("<br>")   
  24. newRadioButton.setAttribute("id",id);   
  25. document.body.insertBefore(newRadioButton);   
  26. id++;   
  27. }   
  28.     
  29. function del(id)   
  30. {   
  31. document.getElementById(id).removeNode(true);   
  32. document.getElementById(id).removeNode(true);   
  33.   
  34. document.getElementById(id).removeNode(true);   
  35. document.getElementById(id).removeNode(true);   
  36.   
  37. }   
  38.   
  39. </script>  
  40. <script>  
  41. function sub()   
  42. {   
  43. var res="+";   
  44. var te=document.getElementsByName("text");   
  45. for(var i=1;i<te.length;i++)   
  46. {   
  47.   
  48. document.getElementsByName("text")[0].value=document.getElementsByName("text")[0].value+"+"+document.getElementsByName("text")[i].value;   
  49. }   
  50.     
  51.   document.forms[0].action = "http://www.test.org";   
  52.   document.forms[0].submit();   
  53. }   
  54. </script>  
  55.   
  56. <form name=fom method=get>  
  57.      <INPUT NAME='text'>  
  58.   
  59.                            
  60. <INPUT NAME='text'>  
  61. <p>                                 
  62. <INPUT TYPE='button' NAME='ADD' VALUE='ADD' onclick="add()">  
  63.   
  64. <br>  
  65. <span id="sp"></span>  
  66. <INPUT TYPE='submit' NAME='SUB' VALUE='SUB' onclick="sub()">  
  67. </form>  
  68.   
  69.  说明一下，脚本中的sub方法只是用来将数据封装然后提交出去，因为是动态的添加和删除，所以不好直接获得每个表单元素的值。   
  70.   
  71.  下面我们再看看FF下的例子   
  72.   
  73. <html>  
  74. <head>  
  75. <title>user</title>  
  76.   
  77. <script type="text/javascript">  
  78.   
  79. var name;   
  80. var title;   
  81. var department;   
  82.   
  83. var id;   
  84.   
  85. function addEmployee() {   
  86.     name = document.getElementById("name").value;   
  87.     title = document.getElementById("title").value;   
  88.     department = document.getElementById("dept").value;   
  89.      
  90. updateEmployeeList();   
  91.   clearInputBoxes();   
  92.   
  93. }   
  94. function clearInputBoxes() {   
  95.   
  96.     document.getElementById("name").value = " ";   
  97.     document.getElementById("title").value = " ";   
  98.     document.getElementById("dept").value = " ";   
  99. }   
  100.   
  101. function deleteEmployee(num) {   
  102. id=num;   
  103. deleteEmployeeFromList();   
  104. }   
  105.   
  106. function updateEmployeeList() {   
  107.       
  108.   
  109.     var num=Math.random( )*Math.random( )*0.1945;   
  110.     var row = document.createElement("tr");     
  111.   
  112.     row.setAttribute("id", num);   
  113.     row.appendChild(createCellWithText(name));   
  114.     row.appendChild(createCellWithText(title));   
  115.     row.appendChild(createCellWithText(department));   
  116.       
  117.     var deleteButton = document.createElement("input");   
  118.     deleteButton.setAttribute("type", "button");   
  119.     deleteButton.setAttribute("value", "Delete");   
  120.     deleteButton.onclick = function () { deleteEmployee(num); };   
  121.     cell = document.createElement("td");   
  122.     
  123.     cell.appendChild(deleteButton);   
  124.     row.appendChild(cell);   
  125.       
  126.     document.getElementById("employeeList").appendChild(row);   
  127.     updateEmployeeListVisibility();   
  128.   
  129.      
  130. }   
  131.   
  132. function createCellWithText(text) {   
  133.     var cell = document.createElement("td");   
  134.     cell.appendChild(document.createTextNode(text));   
  135.     return cell;   
  136. }   
  137.   
  138.     
  139.   
  140. function deleteEmployeeFromList() {   
  141.      
  142.  var rowToDelete = document.getElementById(id);   
  143.     var employeeList = document.getElementById("employeeList");   
  144.   
  145.     employeeList.removeChild(rowToDelete);   
  146.     
  147.     updateEmployeeListVisibility();   
  148. }   
  149.   
  150. function updateEmployeeListVisibility() {   
  151.     var employeeList = document.getElementById("employeeList");   
  152.     if(employeeList.childNodes.length > 0) {   
  153.         document.getElementById("employeeListSpan").style.display = "";   
  154.     }   
  155.     else {   
  156.         document.getElementById("employeeListSpan").style.display = "none";   
  157.     }   
  158. }   
  159. </script>  
  160. </head>  
  161.   
  162. <body>  
  163.   <h1>user List</h1>  
  164.     
  165.   <form action="#">  
  166.     <table width="80%" border="0">  
  167.         <tr>  
  168.             <td>Name: <input type="text" id="name"/></td>  
  169.             <td>Title: <input type="text" id="title"/></td>  
  170.             <td>Department: <input type="text" id="dept"/></td>  
  171.         </tr>  
  172.         <tr>  
  173.             <td colspan="3" align="center">  
  174.                 <input type="button" value="Add" onclick="addEmployee();"/>  
  175.             </td>  
  176.         </tr>  
  177.     </table>  
  178.   </form>  
  179.   
  180.   <span id="employeeListSpan" style="display:none;">  
  181.   <h2>USER:</h2>  
  182.     
  183.   <table border="1" width="80%">  
  184.     <tbody id="employeeList"></tbody>  
  185.   </table>  
  186.   </span>  
  187. </body>  
  188. </html>  
  189.   
  190. 分析一下。因为IE和FF有些函数的使用上有些不同，所以我暂时还不知道用什么函数可以很好的兼容他们。   
  191.   
返回顶楼
         
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics