`

动态添加和删除表单元素

    博客分类：
  • AJAX
IEJavaScript脚本XMLHTML 
阅读更多
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.   
分享到：
| SOAD
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics