使用JQuery将数据附加到表

Question

如何在表中附加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>

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> 

Answer 2

您需要添加的是整个表行以及每个项目属性的表数据单元。 另外，您想将此添加到表主体而不是整个表。 我会这样做：

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