使用Ajax呈現具有多個tbody元素的HTML表格

Question

我想在使用Ajax數據有效載荷的html中呈現表格。 AJAX的數據結構如下： -

{"id":733, 
"lastUpdatedBy":"4", 
"lastUpdatedTime":"2013-11-24 03:00:03PM", 
"jobName":"jobnameA", 
"accountName":"accountname1A" 
} 

的HTML要呈現的表如下： -

<table id="main_table"> 
     <thead> 
     <tr class="firstline"> 
     <th>Column1</th> 
     <th>Column2</th> 
     <th>Column3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr style="background-color:green; color:white"> 
     <td colspan="4" class="flip" id="fisrtsec"> Test Account 19 </td> 
    </tr> 
    </tbody> 
    <tbody class="section"> 
    <tr> 

     <td>item id</td> 
     <td>item jobName</td> 
     <td>item accountName</td> 

    </tr> 
    <tr> 
    <td></td> 
     <td>item 121</td> 
     <td>item 122</td> 
     <td>item 123</td> 
     <td>item 124</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td>item 131</td> 
     <td>item 132</td> 
     <td>item 133</td> 
     <td>item 134</td> 
     </tr> 
    </tbody> 
    <tbody> 
    <tr style="background-color:green; color:white"> 
     <td colspan="4" class="flip"> Section 2 </td> 
    </tr> 
    </tbody> 
    <tbody class="section"> 
    <tr> 
    <td></td> 
     <td>item 211</td> 
     <td>item 212</td> 
     <td>item 213</td> 
     <td>item 214</td> 
    </tr> 
    <tr> 
    <td></td> 
     <td>item 221</td> 
     <td>item 222</td> 
     <td>item 223</td> 
     <td>item 224</td> 
    </tr> 
     <tr> 
    <td></td> 
     <td>item 231</td> 
     <td>item 232</td> 
     <td>item 233</td> 
     <td>item 234</td> 
     </tr> 
    </tbody> 

    </table> 

正在使用jQuery庫。我的jquery是

$.each(data, function(key, val) { 
    $('<tr><td>ID: '+key+'</td><td id="'+key+'">'+val+'</td> 
    <tr>').appendTo('#main_table'); 
    }); 

任何幫助表示讚賞。感謝您的期待。

Answer 1

我不認爲有多個tbody的是有效的標記。話雖如此，試試吧。

('<tr><td>ID: '+key+'</td><td id="'+key+'">'+val+'</td><tr>') 
    .appendTo('#main_table tbody:last'); 

使用:last將附加在表的末尾。