构建HTML表

Question

我正在从JSON对象构建一个表。第一步是构建表列标题：

jq_tblRow = $('<tr>') ;
obj_Report.fieldMetadata.forEach( function(elt) {
   jq_tblRow.append('<th>' + elt.name)
}) ;

这会产生一个包含列标题的行：

<tr><th>Item Type</th><th>Title</th> ... etc... </tr>

是否有更简单的方法用TABLE＆amp; THEAD标签？这是我最终想出来的。它可以工作，但2次调用“.append（）”似乎很尴尬。

jq_tblRow = $('<table>').append( $('<thead>').append(jq_tblRow) );

我尝试了

的各种组合

 .append('<table><thead>')

使用append，appendTo，prepend，before，after等及其排列。

Answer 1

如果您已经有一个jQuery元素，可以使用wrap()函数将其包含一些其他标记：

jq_tblRow = $('<tr>') ;
obj_Report.fieldMetadata.forEach( function(elt) {
    jq_tblRow.append('<th>' + elt.name)
});
// After you have your row in the DOM, wrap it with table/thead tags
jq_tblRow.wrap('<table><thead></thead></table>');

wrap()函数也可以接受一个函数，如果你需要处理更复杂的操作或者更喜欢连接每一面的外观：

jq_tblRow.wrap(function(){
     return '<table><thead>' + this.innerHTML + '/thead></table>';
});