[英]Render an HTML table having multiple tbody elements using Ajax
我正在嘗試使用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');
});
任何幫助表示贊賞。 感謝您的光臨。
我不認為擁有多個tbody
是有效的標記。 話雖如此,請嘗試。
('<tr><td>ID: '+key+'</td><td id="'+key+'">'+val+'</td><tr>')
.appendTo('#main_table tbody:last');
使用:last
將附加在表的末尾。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.