javascript如何動態(tài)加載表格與動態(tài)添加表格行

更新時間：2013年11月27日 16:06:49 作者：

在某些時候需要動態(tài)加載表格與動態(tài)添加表格行，在接下來的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯過

一、動態(tài)加載表格

1.首先在html中為表格的添加位置設置id

即是在html的body標簽內部寫一個div標簽表明表格要添加到此div的內部。如下

<div id="tdl"><div>

2.在javascript中寫添加表格的語句

若在當前html文件中，則寫在<script>標簽內部，如

復制代碼代碼如下:

 
<script type="text/javascript" > 

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此處添加的表格可根據自己需要創(chuàng)建 

</script>

若是通過引入js文件，則在js文件（假設是test.js）中直接寫如下語句

復制代碼代碼如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

然后再引入自己的html文件

復制代碼代碼如下:

二、動態(tài)添加表格行

1.首先在html中為表格行的添加位置設置id，此位置必須是<tbody>內部（不是特別準確，但根據我的測試就得到此結論，有其他的方法請留言，謝謝），如下

復制代碼代碼如下:

 
<table> 
<thead></thead> 

<tfoot><tfoot> //tfoot與thead是與tbody配套使用，但我在寫的時候，沒用也可以。 

<tbody id="rows"></tbody> 

</table> 
[\s\S ]*\n 
2.在javascript內容中，要先創(chuàng)建行和單元格，再在<.tbody>中添加行，如下 
[code] 
row=document.createElement("tr"); //創(chuàng)建行 

td1=document.createElement("tr"); //創(chuàng)建單元格 

td1.appendChild(document.createTextNode("content")); //為單元格添加內容 

row.appendChild(td1); //將單元格添加到行內 

document.getElementById("rows").append(row); //將行添加到<tbody>中 

三、我的小發(fā)現（也許別人早知道了、、、）

1. 我自己做了一下測試，html中寫<table id="tdl'></table>，javascript中寫 document.getElementById("tdl").innerHTML="<tr><td></td></tr>"，這樣寫了之后進行測試，html中table的行不會添加。

2.做完上面的測試，我又改了一下html中寫<table><tr><td id="t'><td><tr></table>，javascript中寫document.getElementById("t").innerHTML="<p>content</p>",測試可以添加內容。

3.思考：從上面兩個測試似乎可以得出點什么結論，該如何總結還沒想好，哪樣的標簽可以直接通過innerHTML直接添加呢？

您可能感興趣的文章: