`

动态创建TABLE

    博客分类：
  • AJAX
AjaxJavaScriptXML浏览器Web 
阅读更多

            才学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>  

 

分享到：
| 把你的郁闷带走(转)
评论
1 楼 tusury 2008-02-24  
用insertCell 和 insertRow
浏览器兼容性比较好
发表评论

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

相关推荐

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