本文實(shí)例講述了JS實(shí)現(xiàn)動態(tài)生成html table表格的方法。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)是一家專業(yè)提供通山企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為通山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。

剛在論壇上面逛的時候看到有人問html表格怎么動態(tài)生成，我回了一下發(fā)現(xiàn)有好多小伙伴追問- - 看來還是有很多人不會的啊，于是決定寫個博來解救萬千小伙伴于水火之中（mdzz）

首先我們要在html里面有如下代碼：

如果想在table里面加其他的可以隨便加（如加一個表頭等等），只需要知道等會js動態(tài)生成的內(nèi)容全部會在tbody里面就可以了。

然后需要如下的js來動態(tài)生成html：

function creatTable(data){
 //這個函數(shù)的參數(shù)可以是從后臺傳過來的也可以是從其他任何地方傳過來的
 //這里我假設(shè)這個data是一個長度為5的字符串?dāng)?shù)組 我要把他放在表格的一行里面，分成五列
 var tableData=""
 //動態(tài)增加5個td,并且把data數(shù)組的五個值賦給每個td
 for(var i=0;i"
 }
 tableData+=""
 //現(xiàn)在tableData已經(jīng)生成好了，把他賦值給上面的tbody
 $("#tbody1").html(tableData)
}

上面的那個tableData可以隨意加html語言，例如我們給tr設(shè)置一下寬度，把var tableData=""改為：

var tableData=""

需要注意的是因?yàn)槲覀冊诮otableData賦值的時候已經(jīng)用了雙引號，所以我們在設(shè)置style的時候要全部用單引號，不然就會報錯，這個大家應(yīng)該都知道，就不多說了。

最后就是在頁面調(diào)用上面寫的函數(shù)來給表格動態(tài)添加數(shù)據(jù)啦?；蛘呶覀円部梢宰岉撁嬖诩虞d的時候就自動給表格動態(tài)添加數(shù)據(jù)：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《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錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。