才学AJAX就被他创建动态TABLE搞糊涂了,他的例子一个函数一个函数的,我没看懂然后就自己研究,找了点DOM的资料,查了相关函数的用法,于是我也会动态创建TABLE。
我发现利用insertBefore()函数不能完成动态创建表的功能,但是其他动态创建WEB元素他可以很好的实现。而且在动态创建表的时候不能直接创建TABLE,必须是动态创建TBODY,然后把TBODY加到TABLE中才能达到目标。
下面是我的代码
原谅我不怎么习惯JAVAEYE的代码显示,总有些标签显示不对, 只有用XML显示才没问题
xml 代码
- <html>
- <head>
-
- <script language=JavaScript>
-
- function creatTable()
- {
- //用createElement函数创建tbody,tr,td,textNode元素
- //关于各元素的意义不在此描述
-
- var tbody= document.createElement("tbody");
- var row=document.createElement("tr");
- var cell=document.createElement("td");
- var textNode=document.createTextNode("test");
- //可用于理解textNode
- //alert(textNode.length); 这里是test的长度4
- //alert(textNode.toString());当然就是test了
-
- //因为各元素都是节点与子节点的关系所以用appendChild()函数将各节点连接起来
- cell.appendChild(textNode);
- row.appendChild(cell);
- tbody.appendChild(row);
-
- //现在可以将创建好的TBODY元素加入指定ID的table中了
- document.getElementById("ww").appendChild(tbody);
- }
- </script>
- </head>
-
- <body>
-
- <input type="button" value="Search" onclick="creatTable();"/>
-
- <table id="ww" width="75%" height="10%" border="2">
-
- <tbody id="resultsBody">
- <tr><td>I AM FIRST ROW</td></tr>
- </tbody>
-
- </table>
- </body>
- </html>