首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

table动态安插HTML行,与insertAdjacentHTML appendChild相似的功能

2012-10-29 
table动态插入HTML行,与insertAdjacentHTML appendChild相似的功能对于div等元素来说,插入一段html是很容

table动态插入HTML行,与insertAdjacentHTML appendChild相似的功能
对于div等元素来说,插入一段html是很容易的事情,但是对于表格来说就太难了。一般情况下,我们都是用appendChild的方式,一行行、一格格地添加,操作起来很繁锁。能不能拼一串字符,就能直接加入到表格中呢?

  下面的例子实现了这个功能,同样地,该例支持IE和firefox。该功能的实现意义重大,这样页面元素的处理,就全部都能够用拼html字串的方法来实现了。

<html> <body> <table id=tb1 border=1 width=100>     <tr><td>1</td></tr> </table> <button onclick=run()>插入行</button> </body> <script> function run(){     insTable(document.getElementById("tb1"),"<tr><td>2</td></tr><tr><td>3</td></tr>") } function insTable(tb,str){     var o=document.createElement("div"),ol;    o.innerHTML="<table>"+str+"</table>";    ol=o.childNodes[0].tBodies[0].rows;    while(ol.length>0){        tb.tBodies[0].appendChild(ol[0])    } } </script>

热点排行