[英]Append data to table using JQuery
如何在表中附加json
數據。 Json數據格式{"FirstName":"Cho" ,"LastName":"Chee","Company":"solution"}
。 此代碼未按預期在表中顯示數據。
jQuery代碼:
var uri = 'api/Employee/GetData';
$(document).ready(function () {
$.getJSON(uri)
.done(function (data) {
$.each(data, function (key, item) {
$('<li>', { text: formatItem(item) }).appendTo($("#tbdata"));
});
});
});
function formatItem(item) {
return item.FirstName + ' ' + item.LastName + ' ' + item.Company;
}
HTML表格:
<table class="table-bordered table-striped table table-hover" id="tbdata">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
</tr>
</table>
看看下面的代碼片段。 我假設您將從服務器上獲取數據數組。
function formatItem(item) { return '<td>'+item.FirstName + '</td> <td> ' + item.LastName + ' </td><td>' + item.Company+'</td>'; } var data = [ {"FirstName":"Cho","LastName":"Chee","Company":"solution"}, {"FirstName":"Cho1","LastName":"Chee1","Company":"solution1"}, {"FirstName":"Cho2","LastName":"Chee2","Company":"solution2"}, ]; $.each(data, function (key, item) { $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata")); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table class="table-bordered table-striped table table-hover" id="tbdata"> <tr> <th>First Name</th> <th>Last Name</th> <th>Company</th> </tr> </table>
您需要添加的是整個表行以及每個項目屬性的表數據單元。 另外,您想將此添加到表主體而不是整個表。 我會這樣做:
HTML:
<table class="table-bordered table-striped table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
</tr>
</thead>
<tbody id="tbdata">
<!-- data will go here -->
</tbody>
</table>
使用Javascript:
$(document).ready(function () {
$.getJSON(uri)
.done(function (data) {
var html = "";
$.each(data, function (key, item) {
html += formatItem(item);
});
$("#tbdata").append(html);
});
});
function formatItem(item) {
return '<tr><td>' item.FirstName + '</td><td>' + item.LastName + '</td><td>' + item.Company + '</td></tr>';
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.