构建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> 

是否有包装，与表& THEAD标签更简单的方法？这是我最终想出来的。它可以工作，但对“.append（）”的2个调用看起来很尴尬。

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

我使用追加，appendTo，前置之前，之后等以及它们的排列试过的

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

各种组合。

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>'; 
});