javascript - 使用 JQuery 将数据追加到表中

Question

如何在表中附加 json 数据。 Json数据格式 {"FirstName":"Cho"
,"姓氏":"Chee","公司":"解决方案"}。此代码未按预期在表中显示数据。

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>

Answer 1

看看下面的代码片段。我假设您将从服务器获取数据数组。

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>