将 tr appendChild 到 table 中的问题

作者: 我不是鱼 (2008-12-15 20:23)分类: Javascript   标签: appendChild 连续添加

做下载后台的时候,做一个可以添加多个链接的功能。就是只要点击添加就会增加一个链接的输入框。这个功能是比较常用的,比如添加更多附件等等。做法是每次克隆一个tr,然后appendChild到table中。一开始死活没有效果,以为是语法有错。后来查看才知道,table无论有没有tbody,用appendChild都会生成tbody标签。appendChild到table的话,新增加的tr就会在</tbody>和</table>之间。

XML/HTML代码
  1. <TABLE id=link_tb cellSpacing=0 cellPadding=0 width="100%" border=0>  
  2. <TBODY>  
  3. <TR id=link_tr>  
  4. <TD>URL: <INPUT size=55 name=link[url][]> <A style="DISPLAY: none" href="javascript:void(null);">删除</A> </TD>  
  5. </TR>  
  6. </TBODY>  
  7. <TR>  
  8. <TD>URL: <INPUT size=55 name=link[url][]> <A href="javascript:void(null);">删除</A> </TD>  
  9. </TR>  
  10. </TABLE>  

所以要讲 tr appendChild 到 tbody 中就好了

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Downloads</title>  
  6. <script language="javascript">  
  7. window.onload = function(){   
  8.     window.new_link = $("link_tr").cloneNode(true);   
  9.     window.new_link.removeAttribute("id");   
  10.     window.new_link.getElementsByTagName("a")[0].style.display = "";   
  11. }   
  12.   
  13. function $(id){   
  14.     return document.getElementById(id);   
  15. }   
  16.   
  17. function more_link(){   
  18.     var newl = new_link.cloneNode(true);   
  19.     var a = newl.getElementsByTagName("a")[0];   
  20.     bind(a, "click"function(){delete_link(a);});   
  21.     $("link_tb").appendChild(newl);   
  22. }   
  23.   
  24. function delete_link(o){   
  25.     while(o.parentNode){   
  26.         o = o.parentNode;   
  27.         if(typeof o.tagName != 'undefined' && o.tagName == 'TR'){   
  28.             o.parentNode.removeChild(o);   
  29.             break;   
  30.         }   
  31.     }   
  32. }   
  33.   
  34. function bind(o, eventHandler, fun){   
  35.     if(o.attachEvent)   
  36.         o.attachEvent('on'+eventHandler,fun);   
  37.     else if(o.addEventListener)   
  38.         o.addEventListener(eventHandler,fun,false);   
  39. }
  40. </script>  
  41. </head>  
  42. <body>  
  43. <form action="" method="post" name="add_form">  
  44.   <table width="100%" border="0" cellspacing="0" cellpadding="0">  
  45.   <tbody id="link_tb">  
  46.     <tr id="link_tr">  
  47.       <td>URL: <input name="link[url][]" type="text" size="55" />  
  48.           <a href="javascript:void(null);" style="display:none;">删除</a>  
  49.       </td>  
  50.     </tr>  
  51.   </tbody>  
  52.   </table>  
  53. </form>  
  54. <a href="javascript:more_link()">继续添加地址</a>  
  55. </body>  
  56. </html>  

评论 (0) | 浏览 (4879)

前一篇: 颜色渐变的算法
后一篇: RSS2.0元素元素列表


添加评论

昵称:


博主


« 2019年-07月 »
30 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 1 2 3

分类


热门标签


最新评论


最近留言


概要

  • 文章数量: 41
  • 分类数量: 9
  • 标签数量: 73
  • 评论数量: 159
  • 浏览次数: 2977664

友情链接