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ì)的啊，于是決定寫個(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)用上面寫的函數(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)容感興趣的讀者可查看本站專題：《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ì)有所幫助。