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

动态创建TABLE

浏览 8070 次
锁定老帖子 主题：动态创建TABLE
该帖已经被评为新手帖
作者 正文
  • dikar
  • 等级: 初级会员
  • 性别:
  • 文章: 40
  • 积分: 50
  • 来自: 杭州
   发表时间：2007-11-26  

            才学AJAX就被他创建动态TABLE搞糊涂了，他的例子一个函数一个函数的，我没看懂然后就自己研究，找了点DOM的资料，查了相关函数的用法，于是我也会动态创建TABLE。
           我发现利用insertBefore()函数不能完成动态创建表的功能，但是其他动态创建WEB元素他可以很好的实现。而且在动态创建表的时候不能直接创建TABLE，必须是动态创建TBODY，然后把TBODY加到TABLE中才能达到目标。
下面是我的代码
          原谅我不怎么习惯JAVAEYE的代码显示，总有些标签显示不对, 只有用XML显示才没问题

xml 代码
  1.   <html>  
  2.   <head>  
  3.      
  4.   <script language=JavaScript>  
  5.      
  6. function creatTable()   
  7. {   
  8. //用createElement函数创建tbody,tr,td,textNode元素   
  9. //关于各元素的意义不在此描述   
  10.     
  11.   var tbody= document.createElement("tbody");   
  12.   var row=document.createElement("tr");   
  13.   var cell=document.createElement("td");   
  14.   var textNode=document.createTextNode("test");   
  15.  //可用于理解textNode   
  16.  //alert(textNode.length); 这里是test的长度4   
  17.  //alert(textNode.toString());当然就是test了   
  18.     
  19.  //因为各元素都是节点与子节点的关系所以用appendChild()函数将各节点连接起来   
  20.   cell.appendChild(textNode);   
  21.   row.appendChild(cell);   
  22.   tbody.appendChild(row);   
  23.   
  24. //现在可以将创建好的TBODY元素加入指定ID的table中了   
  25. document.getElementById("ww").appendChild(tbody);   
  26.  }   
  27.   </script>  
  28.    </head>  
  29.   
  30. <body>  
  31.   
  32. <input type="button" value="Search" onclick="creatTable();"/>  
  33.   
  34. <table id="ww" width="75%" height="10%" border="2">  
  35.   
  36. <tbody id="resultsBody">  
  37. <tr><td>I AM FIRST ROW</td></tr>  
  38. </tbody>  
  39.   
  40. </table>  
  41. </body>  
  42. </html>  

 
返回顶楼
         
  • tusury
  • 等级: 初级会员
  • 性别:
  • 文章: 35
  • 积分: 30
  • 来自: 杭州
   发表时间：2008-02-24  
用insertCell 和 insertRow
浏览器兼容性比较好
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → 入门技术版

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