日期:2014-05-17  浏览次数:20506 次

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>