溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS實現動態生成html table表格的方法。分享給大家供大家參考，具體如下：
剛在論壇上面逛的時候看到有人問html表格怎么動態生成，我回了一下發現有好多小伙伴追問- - 看來還是有很多人不會的啊，于是決定寫個博來解救萬千小伙伴于水火之中（mdzz）
首先我們要在html里面有如下代碼：
<table> <tbody id="tbody1"> </tbody> </table>
如果想在table里面加其他的可以隨便加（如加一個表頭等等），只需要知道等會js動態生成的內容全部會在tbody里面就可以了。
然后需要如下的js來動態生成html：
function creatTable(data){
//這個函數的參數可以是從后臺傳過來的也可以是從其他任何地方傳過來的
//這里我假設這個data是一個長度為5的字符串數組 我要把他放在表格的一行里面，分成五列
var tableData="<tr>"
//動態增加5個td,并且把data數組的五個值賦給每個td
for(var i=0;i<data.length;i++){
tableData+="<td>"+data[i]+"</td>"
}
tableData+="</tr>"
//現在tableData已經生成好了，把他賦值給上面的tbody
$("#tbody1").html(tableData)
}
上面的那個tableData可以隨意加html語言，例如我們給tr設置一下寬度，把var tableData=""改為：
var tableData="<tr style='width:300px'>"
需要注意的是因為我們在給tableData賦值的時候已經用了雙引號，所以我們在設置style的時候要全部用單引號，不然就會報錯，這個大家應該都知道，就不多說了。
最后就是在頁面調用上面寫的函數來給表格動態添加數據啦。或者我們也可以讓頁面在加載的時候就自動給表格動態添加數據：
<script type="text/javascript">
window.onload()=function ()
{
//這個里面復制上面creatTable函數的內容
}
</script>
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧總結》、《JavaScript數組操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
