自知其无知
不懂，慢慢懂。
posts - 2,comments - 2,trackbacks - 0
javascript动态增加行的错误 （问题比较经典）

转自: http://www.javaeye.com/problems/2639

  1. <html>   
  2. <head>   
  3. <title>动态添加html元素</title>   
  4. <script type="text/javascript">   
  5. <!--   
  6. var textNumber = 1;   
  7. function addCheckDetail(form,afterElement){   
  8.     textNumber++;   
  9.     //创建列表标签   
  10.     var label2=document.createElement("label");   
  11.     label2.appendChild(document.createTextNode("问题所属方面："));   
  12.     var select=document.createElement("select");    
  13.     select.setAttribute("select","select"+textNumber);   
  14.     select.setAttribute("size","1");   
  15.     select.setAttribute("id","select"+textNumber);   
  16.     var option1=document.createElement("option");   
  17.     option1.setAttribute("value","1");   
  18.     option1.appendChild(document.createTextNode("方面一"));   
  19.     var option2=document.createElement("option");   
  20.     option2.setAttribute("value","2");   
  21.     option2.appendChild(document.createTextNode("方面二"));       
  22.     label2.appendChild(select);   
  23.     select.appendChild(option1);   
  24.     select.appendChild(option2);   
  25.     form.insertBefore(label2,afterElement);   
  26.        
  27.     // 创建文本标签   
  28.     var label1 = document.createElement("label");   
  29.     // 创建文本框   
  30.     var textField = document.createElement("textarea");   
  31.     textField.setAttribute("name","txt"+textNumber);   
  32.     textField.setAttribute("cols",80);   
  33.     textField.setAttribute("rows",3);   
  34.     textField.setAttribute("id","txt"+textNumber);   
  35.     // 增加标签文本注释   
  36.     label1.appendChild(document.createTextNode("问题描述"+textNumber+":"));   
  37.     // 把textField放入标签中   
  38.     label1.appendChild(textField);   
  39.     // 把所有的这些增加到form中   
  40.     form.insertBefore(label1,afterElement);   
  41. }   
  42. function removeCheckDetail(form,afterElement){   
  43.     // 假如有文本框个数超过一个   
  44.     if (textNumber > 1) {    
  45.         // 删除最后一个添加的文本框   
  46.         form.removeChild(document.getElementById("select"+textNumber).parentNode);   
  47.         form.removeChild(document.getElementById("txt"+textNumber).parentNode);   
  48.         textNumber--;   
  49.     }   
  50. }   
  51. //-->   
  52. </script>   
  53. <style type="text/css">   
  54. <!--   
  55. label {   
  56.   display:block;   
  57.   margin:.25em 0em;   
  58. }   
  59. -->   
  60. </style>   
  61. </head>   
  62. <body>   
  63. <form id="myForm" method="get" action="./" />  
  1. <table><tbody>   
  2.         <label>问题所属方面：   
  3.         <select name="select" size="1" id="">   
  4.           <option value="1">问题一</option>   
  5.           <option value="2">问题二</option>   
  6.         </select>   
  7.         </label>   
  8.         <label>问题描述1:<textarea name="txt1" cols="80" rows="3"></textarea></label>   
  9.            
  10.         <p>   
  11.           <input type="button" value="添加一个问题" onclick="addCheckDetail(this.form,this.parentNode)" />   
  12.           <input type="button" value="删除最后一个问题" onclick="removeCheckDetail(this.form)" />   
  13.         </p>   
  14.         <p><input type="Submit" value="保存" /></p>  
  1. </tbody></table>   
  2.   
  3. </form>   
  4. </body>   
  5. </html>  

 我想用javascript动态增加行,当form中没有table标签时是可以增加的,像上面增加了table标签就出现错误了,请问各位该如何解决?

    
=======================================
解决方案:
由于form.insertBefore是将指定节点添加到form的直接子节点上,由于form中只有一个table,没有afterElement这个直接子节点.所以会报错.
input标签的parentNode即p标签,它的直接父结点是TBODY标签.所以只能用TBodyElement.insertBefore.进行插入.

把
Js代码 复制代码
  1. form.insertBefore(label2,afterElement);   
  2. form.insertBefore(label1,afterElement);  

两句改为:
  1. afterElement.parentNode.insertBefore(label2,afterElement);   
  2. afterElement.parentNode.insertBefore(label1,afterElement);  

posted on 2008-12-15 23:23 CopyHoo 阅读(804) 评论(0)  编辑  收藏 所属分类: Java Web

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 CopyHoo Powered By博客园 模板提供：沪江博客