欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2013年11月27日 16:06:49   作者：  
在某些時候需要動態(tài)加載表格與動態(tài)添加表格行，在接下來的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯過
一、動態(tài)加載表格

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

即是在html的body標(biāo)簽內(nèi)部寫一個div標(biāo)簽表明表格要添加到此div的內(nèi)部。如下

<div id="tdl"><div>

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

若在當(dāng)前html文件中，則寫在<script>標(biāo)簽內(nèi)部，如
復(fù)制代碼 代碼如下:

<script type="text/javascript" >

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

</script>

若是通過引入js文件，則在js文件（假設(shè)是test.js）中直接寫如下語句
復(fù)制代碼 代碼如下:

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

然后再引入自己的html文件
復(fù)制代碼 代碼如下:

<script type="text/javascript" src="test.js"></script>

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

1.首先在html中為表格行的添加位置設(shè)置id，此位置必須是<tbody>內(nèi)部（不是特別準(zhǔn)確，但根據(jù)我的測試就得到此結(jié)論，有其他的方法請留言，謝謝），如下
復(fù)制代碼 代碼如下:

<table>
<thead></thead>

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

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

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

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

相關(guān)文章

  • JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊列原理與用法實例詳解

    JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊列原理與用法實例詳解

    這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊列原理與用法,較為詳細(xì)的說明了隊列的概念、原理,并結(jié)合實例形式分析了javascript實現(xiàn)與使用隊列的相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2017-11-11
  • javascript學(xué)習(xí)筆記之函數(shù)定義

    javascript學(xué)習(xí)筆記之函數(shù)定義

    本文主要給大家介紹了javascript的一些函數(shù)定義方面的基礎(chǔ)知識，包括函數(shù)聲明式、函數(shù)表達(dá)式、Function 構(gòu)造函數(shù)等，十分的簡單實用，有需要的小伙伴可以參考下。
    2015-06-06
  • 微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】

    微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的3d輪播圖效果,結(jié)合實例形式分析了微信小程序基于swiper組件相關(guān)屬性設(shè)置、事件響應(yīng)操作技巧,需要的朋友可以參考下
    2018-12-12
  • Javascript實現(xiàn)重力彈跳拖拽運動效果示例

    Javascript實現(xiàn)重力彈跳拖拽運動效果示例

    本文為大家詳細(xì)介紹下使用Javascript實現(xiàn)重力彈跳拖拽運動的具體調(diào)用方法，感興趣的朋友可以參考下哈
    2013-06-06
  • 微信小程序開發(fā)問題之wx.previewImage

    微信小程序開發(fā)問題之wx.previewImage

    這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)問題之wx.previewImage的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • js特效,頁面下雪的小例子

    js特效,頁面下雪的小例子

    js特效,頁面下雪的小例子，需要的朋友可以參考一下
    2013-06-06
  • JS在一定時間內(nèi)跳轉(zhuǎn)頁面及各種刷新頁面的實現(xiàn)方法

    JS在一定時間內(nèi)跳轉(zhuǎn)頁面及各種刷新頁面的實現(xiàn)方法

    這篇文章主要介紹了JS在一定時間內(nèi)跳轉(zhuǎn)頁面及各種刷新頁面的實現(xiàn)方法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-05-05

    • 最新評論