`

动态添加和删除表单元素

    博客分类：
  • 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
评论
发表评论

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

相关推荐

    动态添加删除表单元素

    总结，动态添加删除表单元素是提升网页交互性的重要手段，通过JavaScript的DOM操作，我们可以灵活地管理页面上的表单元素，实现动态的用户界面。理解并掌握这一技术，对于前端开发者来说，无疑会增强其在实际项目中...

    jQuery表单元素动态增加删除代码.zip

    首先，`addel.js`是这个实现的核心脚本文件，它包含了动态添加和删除表单元素的逻辑。在JavaScript中，我们可以使用DOM操作方法来创建、插入或删除HTML元素。jQuery提供了更加简洁和强大的API，比如`$().append()`...

    php实现表单的动态添加删除

    在动态添加和删除表单元素的场景中，PHP需要能够根据用户的请求动态生成或移除HTML代码。 1. **动态生成表单**：在PHP中，可以使用字符串拼接或者模板引擎（如Twig）来动态生成HTML代码。例如，你可以创建一个数组...

    jQuery实现的可直接添加删除表单元素特效源码.zip

    《jQuery实现的动态添加删除表单元素特效》 在网页开发中，经常需要处理动态添加和删除表单元素的需求，以满足用户交互性和数据管理的灵活性。jQuery作为一个强大的JavaScript库，提供了丰富的API和方法，使得这类...

    Vue ~ element-ui 动态表单验证，支持添加和删除操作

    本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...

    jQuery添加删除表单元素代码.zip

    本资源“jQuery添加删除表单元素代码.zip”提供了一种利用jQuery动态添加和删除表单行的解决方案，主要依赖于名为"jquery.dynamic-rows"的插件。这个插件是针对那些需要在用户交互时动态管理表单元素的应用场景设计...

    jQuery实现动态添加、删除按钮及input输入框的方法

    通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....

    jQuery表单添加

    四、动态添加和删除表单元素 7. **动态创建元素**：可以使用`$("&lt;element&gt;")`动态创建新元素，然后通过`.append()`或`.prepend()`方法将其添加到DOM中。 8. **删除元素**：`$(this).remove()`可以删除选中的元素，...

    Vue+Element实现动态生成新表单并添加验证功能

    在动态表单中，除了需要定义表单结构和验证规则之外，还需要处理用户与表单的交互逻辑，比如添加和删除表单字段。本文中的代码示例，提供了点击按钮添加新表单字段的功能，同时，为每个动态生成的表单字段附加了一个...

    Angularjs 动态添加表单

    在传统的HTML表单中，我们通常会预先定义好所有的表单元素，但在某些情况下，比如用户需要根据需求自定义输入项，动态添加表单就显得非常实用。AngularJS通过其数据绑定和指令系统为这一功能提供了便利。 ### 1. ...

    jQuery bootstrap自定义创建表单工具代码

    4. **动态添加和删除表单元素**：利用jQuery，可以实现动态添加或删除表单字段，这在用户需要根据需求增减输入项时尤其有用。 5. **表单验证**：通过jQuery实现客户端的表单验证，比如检查必填字段、验证邮箱格式、...

    动态添加删除TEXT框

    以上就是关于动态添加删除TEXT框的基本实现和相关知识点。这个功能可以应用于各种场景，如表单填写、笔记应用等，使得用户可以根据自己的需求动态调整界面。在实际项目中，可能还需要考虑更多的细节，如错误处理、...

    jquery表格动态添加删除行代码.zip

    总的来说，"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript（主要是jQuery）的示例，它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用，例如在线...

    QT可动态添加、删除控件的小项目

    在本项目"QT可动态添加、删除控件的小项目"中，开发者利用QT的灵活性和强大功能，构建了一个能够根据需要动态管理界面元素的系统。 首先，我们要理解的核心概念是动态添加控件。在QT中，可以通过编程方式在运行时...

    动态添加表单

    动态添加表单是Web开发中常见的一种功能，它允许用户在运行时根据需求自定义或增加表单元素，为用户提供更灵活的交互体验。在网页设计中，这种技术尤其适用于数据输入多变或者需要用户自由组合信息的情况。下面将...

    dynamic-form:您可以从中添加和删除元素的动态表单

    2. JavaScript：编写动态添加和删除表单元素的逻辑。 3. CSS3：实现表单的样式和响应式设计。 4. 第三方插件：可能用于增强表单功能，如表单验证、动画效果等。 5. 主入口文件：如dynamic-form-main，负责项目的启动...

    js添加删除表单中的行

    使用js添加删除表单中的行,动态的添加,适合各种应用系统的前台页面

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