一、動態載入表格
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>" //此處新增的表格可依自己需求建立
</script>
若是透過引入js文件,則在js檔案(假設是test.js)中直接寫如下語句
複製代碼代碼如下:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
然後再引入自己的html文件
複製代碼代碼如下:
<script type="text/javascript" src="test.js"></script>
二、 動態新增表格行
1.首先在html中為表格行的新增位置設定id,此位置必須是<tbody>內部(不是特別準確,但根據我的測試就得到此結論,有其他的方法請留言,謝謝),如下
複製代碼代碼如下:
<table>
<thead></thead>
<tfoot><tfoot> //tfoot與thead是與tbody搭配使用,但我在寫的時候,沒用也可以。
<tbody id="rows"></tbody>
</table>
[/s/S ]*/n
2.在javascript內容中,要先建立行和單元格,再在<.tbody>中加入行,如下
[code]
row=document.createElement("tr"); //建立行
td1=document.createElement("tr"); //建立儲存格
td1.appendChild(document.createTextNode("content")); //為儲存格新增內容
row.appendChild(td1); //將儲存格加入行內
document.getElementById("rows").append(row); //將行加入<tbody>中
三、我的小發現(也許別人早知道了、、、)
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直接加入呢?