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>

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