JS實(shí)現(xiàn)動(dòng)態(tài)生成html table表格的方法分析
本文實(shí)例講述了JS實(shí)現(xiàn)動(dòng)態(tài)生成html table表格的方法。分享給大家供大家參考，具體如下：
剛在論壇上面逛的時(shí)候看到有人問(wèn)html表格怎么動(dòng)態(tài)生成，我回了一下發(fā)現(xiàn)有好多小伙伴追問(wèn)- - 看來(lái)還是有很多人不會(huì)的啊，于是決定寫(xiě)個(gè)博來(lái)解救萬(wàn)千小伙伴于水火之中（mdzz）
首先我們要在html里面有如下代碼：
<table> <tbody id="tbody1"> </tbody> </table>
如果想在table里面加其他的可以隨便加（如加一個(gè)表頭等等），只需要知道等會(huì)js動(dòng)態(tài)生成的內(nèi)容全部會(huì)在tbody里面就可以了。
然后需要如下的js來(lái)動(dòng)態(tài)生成html：
function creatTable(data){
//這個(gè)函數(shù)的參數(shù)可以是從后臺(tái)傳過(guò)來(lái)的也可以是從其他任何地方傳過(guò)來(lái)的
//這里我假設(shè)這個(gè)data是一個(gè)長(zhǎng)度為5的字符串?dāng)?shù)組 我要把他放在表格的一行里面，分成五列
var tableData="<tr>"
//動(dòng)態(tài)增加5個(gè)td,并且把data數(shù)組的五個(gè)值賦給每個(gè)td
for(var i=0;i<data.length;i++){
tableData+="<td>"+data[i]+"</td>"
}
tableData+="</tr>"
//現(xiàn)在tableData已經(jīng)生成好了，把他賦值給上面的tbody
$("#tbody1").html(tableData)
}
上面的那個(gè)tableData可以隨意加html語(yǔ)言，例如我們給tr設(shè)置一下寬度，把var tableData=""改為：
var tableData="<tr style='width:300px'>"
需要注意的是因?yàn)槲覀冊(cè)诮otableData賦值的時(shí)候已經(jīng)用了雙引號(hào)，所以我們?cè)谠O(shè)置style的時(shí)候要全部用單引號(hào)，不然就會(huì)報(bào)錯(cuò)，這個(gè)大家應(yīng)該都知道，就不多說(shuō)了。
最后就是在頁(yè)面調(diào)用上面寫(xiě)的函數(shù)來(lái)給表格動(dòng)態(tài)添加數(shù)據(jù)啦?；蛘呶覀円部梢宰岉?yè)面在加載的時(shí)候就自動(dòng)給表格動(dòng)態(tài)添加數(shù)據(jù)：
<script type="text/javascript">
window.onload()=function ()
{
//這個(gè)里面復(fù)制上面creatTable函數(shù)的內(nèi)容
}
</script>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- JS組件Bootstrap Table使用方法詳解
- JS獲取Table中td值的方法
- JS動(dòng)態(tài)添加Table的TR，TD實(shí)現(xiàn)方法
- JavaScript獲取table中某一列的值的方法
- Sortable.js拖拽排序使用方法解析
- Js獲取table當(dāng)前tr行的值的代碼
- js操作table示例(個(gè)人心得)
- js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡(jiǎn)單實(shí)例
- JavaScript操作HTML表格：遍歷、列讀取、刪除行、更新列等table的動(dòng)態(tài)管理
相關(guān)文章
JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法的相關(guān)資料,layer是layui的一個(gè)彈出層組件,但是可以作為獨(dú)立組件使用,需要的朋友可以參考下2023-10-10
JS實(shí)現(xiàn)模糊查詢(xún)帶下拉匹配效果
這篇文章主要介紹了JS實(shí)現(xiàn)模糊查詢(xún)帶下拉匹配效果,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要應(yīng)用javascript代碼實(shí)現(xiàn)文字垂直滾動(dòng)的效果,需要的朋友可以參考下2015-07-07
一個(gè)javascript參數(shù)的小問(wèn)題
2008-03-03
js實(shí)現(xiàn)用戶(hù)輸入的小寫(xiě)字母自動(dòng)轉(zhuǎn)大寫(xiě)字母的方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)用戶(hù)輸入的小寫(xiě)字母自動(dòng)轉(zhuǎn)大寫(xiě)字母的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
一起來(lái)看看JavaScript數(shù)據(jù)類(lèi)型最詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)類(lèi)型，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
jQuery AJAX回調(diào)函數(shù)this指向問(wèn)題
了解JavaScript的人都知道JavaScript的this不總是指向當(dāng)前對(duì)象，函數(shù)或類(lèi)中的this指向與調(diào)用這個(gè)函數(shù)的對(duì)象以及上下文環(huán)境是息息相關(guān)的。2010-02-02
今天小編就為大家分享一篇原生js檢測(cè)頁(yè)面加載完畢的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁(yè)面效果(類(lèi)似360默認(rèn)頁(yè)面滾動(dòng)切換效果)
這篇文章主要介紹了js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁(yè)面效果,類(lèi)似360默認(rèn)頁(yè)面滾動(dòng)切換效果.涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-01-01
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之隊(duì)列(Queue)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之隊(duì)列(Queue),結(jié)合實(shí)例形式詳細(xì)分析了javascript中隊(duì)列的概念、原理、定義及常見(jiàn)操作技巧,需要的朋友可以參考下2019-08-08