javascript如何動(dòng)態(tài)加載表格與動(dòng)態(tài)添加表格行
更新時(shí)間：2013年11月27日 16:06:49 作者：
在某些時(shí)候需要?jiǎng)討B(tài)加載表格與動(dòng)態(tài)添加表格行，在接下來的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯(cuò)過
一、動(dòng)態(tài)加載表格
1.首先在html中為表格的添加位置設(shè)置id
即是在html的body標(biāo)簽內(nèi)部寫一個(gè)div標(biāo)簽表明表格要添加到此div的內(nèi)部。如下
<div id="tdl"><div>
2.在javascript中寫添加表格的語(yǔ)句
若在當(dāng)前html文件中，則寫在<script>標(biāo)簽內(nèi)部，如
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此處添加的表格可根據(jù)自己需要?jiǎng)?chuàng)建
</script>
若是通過引入js文件，則在js文件（假設(shè)是test.js）中直接寫如下語(yǔ)句
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
<script type="text/javascript" src="test.js"></script>
二、 動(dòng)態(tài)添加表格行
1.首先在html中為表格行的添加位置設(shè)置id，此位置必須是<tbody>內(nèi)部（不是特別準(zhǔn)確，但根據(jù)我的測(cè)試就得到此結(jié)論，有其他的方法請(qǐng)留言，謝謝），如下
<table>
<thead></thead>
<tfoot><tfoot> //tfoot與thead是與tbody配套使用，但我在寫的時(shí)候，沒用也可以。
<tbody id="rows"></tbody>
</table>
[\s\S ]*\n
2.在javascript內(nèi)容中，要先創(chuàng)建行和單元格，再在<.tbody>中添加行，如下
[code]
row=document.createElement("tr"); //創(chuàng)建行
td1=document.createElement("tr"); //創(chuàng)建單元格
td1.appendChild(document.createTextNode("content")); //為單元格添加內(nèi)容
row.appendChild(td1); //將單元格添加到行內(nèi)
document.getElementById("rows").append(row); //將行添加到<tbody>中
三、我的小發(fā)現(xiàn)（也許別人早知道了、、、）
1. 我自己做了一下測(cè)試，html中寫<table id="tdl'></table>，javascript中寫 document.getElementById("tdl").innerHTML="<tr><td></td></tr>"，這樣寫了之后進(jìn)行測(cè)試，html中table的行不會(huì)添加。
2.做完上面的測(cè)試，我又改了一下html中寫<table><tr><td id="t'><td><tr></table>，javascript中寫document.getElementById("t").innerHTML="<p>content</p>",測(cè)試可以添加內(nèi)容。
3.思考：從上面兩個(gè)測(cè)試似乎可以得出點(diǎn)什么結(jié)論，該如何總結(jié)還沒想好，哪樣的標(biāo)簽可以直接通過innerHTML直接添加呢？
1.首先在html中為表格的添加位置設(shè)置id
即是在html的body標(biāo)簽內(nèi)部寫一個(gè)div標(biāo)簽表明表格要添加到此div的內(nèi)部。如下
<div id="tdl"><div>
2.在javascript中寫添加表格的語(yǔ)句
若在當(dāng)前html文件中，則寫在<script>標(biāo)簽內(nèi)部，如
復(fù)制代碼 代碼如下:
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此處添加的表格可根據(jù)自己需要?jiǎng)?chuàng)建
</script>
若是通過引入js文件，則在js文件（假設(shè)是test.js）中直接寫如下語(yǔ)句
復(fù)制代碼 代碼如下:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="test.js"></script>
二、 動(dòng)態(tài)添加表格行
1.首先在html中為表格行的添加位置設(shè)置id，此位置必須是<tbody>內(nèi)部（不是特別準(zhǔn)確，但根據(jù)我的測(cè)試就得到此結(jié)論，有其他的方法請(qǐng)留言，謝謝），如下
復(fù)制代碼 代碼如下:
<table>
<thead></thead>
<tfoot><tfoot> //tfoot與thead是與tbody配套使用，但我在寫的時(shí)候，沒用也可以。
<tbody id="rows"></tbody>
</table>
[\s\S ]*\n
2.在javascript內(nèi)容中，要先創(chuàng)建行和單元格，再在<.tbody>中添加行，如下
[code]
row=document.createElement("tr"); //創(chuàng)建行
td1=document.createElement("tr"); //創(chuàng)建單元格
td1.appendChild(document.createTextNode("content")); //為單元格添加內(nèi)容
row.appendChild(td1); //將單元格添加到行內(nèi)
document.getElementById("rows").append(row); //將行添加到<tbody>中
三、我的小發(fā)現(xiàn)（也許別人早知道了、、、）
1. 我自己做了一下測(cè)試，html中寫<table id="tdl'></table>，javascript中寫 document.getElementById("tdl").innerHTML="<tr><td></td></tr>"，這樣寫了之后進(jìn)行測(cè)試，html中table的行不會(huì)添加。
2.做完上面的測(cè)試，我又改了一下html中寫<table><tr><td id="t'><td><tr></table>，javascript中寫document.getElementById("t").innerHTML="<p>content</p>",測(cè)試可以添加內(nèi)容。
3.思考：從上面兩個(gè)測(cè)試似乎可以得出點(diǎn)什么結(jié)論，該如何總結(jié)還沒想好，哪樣的標(biāo)簽可以直接通過innerHTML直接添加呢？
您可能感興趣的文章:
- JavaScript如何動(dòng)態(tài)創(chuàng)建table表格
- JS實(shí)現(xiàn)從表格中動(dòng)態(tài)刪除指定行的方法
- JS實(shí)現(xiàn)動(dòng)態(tài)生成html table表格的方法分析
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- JS實(shí)現(xiàn)動(dòng)態(tài)生成表格并提交表格數(shù)據(jù)向后端
- JavaScript中動(dòng)態(tài)向表格添加數(shù)據(jù)
- JS實(shí)現(xiàn)向表格中動(dòng)態(tài)添加行的方法
- js動(dòng)態(tài)修改表格行colspan列跨度的方法
- JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加，修改，刪除功能(推薦)
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果
相關(guān)文章
瀏覽器的后退按鈕使得我們能夠方便地返回以前訪問過的頁(yè)面，它無疑非常有用。但有時(shí)候我們不得不關(guān)閉這個(gè)功能，以 防止用戶打亂預(yù)定的頁(yè)面訪問次序。2008-12-12
純js實(shí)現(xiàn)div內(nèi)圖片自適應(yīng)大小(已測(cè)試，兼容火狐)
純js實(shí)現(xiàn)在img圖片大小未知，div大小未知的情況下，讓圖片自適應(yīng)大小,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了javascript淘寶主圖放大鏡功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JavaScript中的無阻塞加載性能優(yōu)化方案,本文講解了Deferred Scripts 延期腳本、Dynamic Script Elements 動(dòng)態(tài)腳本元素、XMLHttpRequest Script Injection XHR腳本注入等內(nèi)容,需要的朋友可以參考下2014-10-10
uniapp使用uni自帶websocket進(jìn)行即時(shí)通訊詳細(xì)步驟
在開發(fā)程序過程中通信功能還是比較常用到的,下面這篇文章主要給大家介紹了關(guān)于uniapp使用uni自帶websocket進(jìn)行即時(shí)通訊的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
WebView啟動(dòng)支付寶客戶端支付失敗的問題小結(jié)
這篇文章主要介紹了WebView啟動(dòng)支付寶客戶端支付失敗的問題小結(jié)的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)打卡日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript 動(dòng)態(tài)添加腳本，并觸發(fā)回調(diào)函數(shù)的實(shí)現(xiàn)代碼
JavaScript 動(dòng)態(tài)添加腳本，并觸發(fā)回調(diào)函數(shù)的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-01-01
JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要給大家介紹了關(guān)于如何使用js查找數(shù)組中符合條件的元素,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04