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>

• 效果