1. 程式人生 > >js動態生成html表格

js動態生成html表格

剛在論壇上面逛的時候看到有人問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>

嘔心瀝血寫出來的,轉載請一定著名出處。