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)添加表格行，在接下來(lái)的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯(cuò)過(guò)
一、動(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>
若是通過(guò)引入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í)候，沒(méi)用也可以。
<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é)還沒(méi)想好，哪樣的標(biāo)簽可以直接通過(guò)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>
若是通過(guò)引入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í)候，沒(méi)用也可以。
<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é)還沒(méi)想好，哪樣的標(biāo)簽可以直接通過(guò)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)文章
Javascript中valueOf與toString區(qū)別淺析
Javascript中valueOf與toString區(qū)別淺析，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家介紹了Json?Web?Token在前后端實(shí)踐思考分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊(duì)列原理與用法實(shí)例詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊(duì)列原理與用法,較為詳細(xì)的說(shuō)明了隊(duì)列的概念、原理,并結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)與使用隊(duì)列的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2017-11-11 
javascript學(xué)習(xí)筆記之函數(shù)定義
本文主要給大家介紹了javascript的一些函數(shù)定義方面的基礎(chǔ)知識(shí)，包括函數(shù)聲明式、函數(shù)表達(dá)式、Function 構(gòu)造函數(shù)等，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2015-06-06 
微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的3d輪播圖效果,結(jié)合實(shí)例形式分析了微信小程序基于swiper組件相關(guān)屬性設(shè)置、事件響應(yīng)操作技巧,需要的朋友可以參考下
2018-12-12 
Javascript實(shí)現(xiàn)重力彈跳拖拽運(yùn)動(dòng)效果示例
本文為大家詳細(xì)介紹下使用Javascript實(shí)現(xiàn)重力彈跳拖拽運(yùn)動(dòng)的具體調(diào)用方法，感興趣的朋友可以參考下哈
2013-06-06 
微信小程序開(kāi)發(fā)問(wèn)題之wx.previewImage
這篇文章主要給大家介紹了關(guān)于微信小程序開(kāi)發(fā)問(wèn)題之wx.previewImage的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12 
js特效,頁(yè)面下雪的小例子，需要的朋友可以參考一下
2013-06-06 
JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05