jquery動態創建表格

• 注意！如果你要動態創建元素，例如表格的行，一定是

var $row = $("<tr></tr>");

如果我們不幸的寫成了

var $row = $("tr"); 那么這意味着獲取頁面上所有的tr元素，將和我們的初衷南轅北轍

• 例子：利用jquery回調函數的查詢結果生成動態表格

function gentblrow(myobject,keyword) { var $row = $("<tr></tr>"); for(var $i=0;$i<myobject.length;$i++) { $row.append($("<td>"+myobject[$i].start+"</td>")); console.log(myobject[$i].start); $row.append($("<td>"+myobject[$i].end+"</td>")); console.log(myobject[$i].end); $row.append($("<td>"+myobject[$i].content+"</td>")); console.log(myobject[$i].content); var objname = keyword; $("#tbl_practise_exp").children("table").children("tbody").append($row); $row = $("<tr></tr>"); } console.log(myobject); }

• html部分

<table class="table table-striped col-md-10">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>

    </tr>
  </tbody>
</table>

• 效果