html - 如何根据 API 的响应在 Bootstrap 表中动态添加一行？

Question

<table class="table table-condensed" id="binding-table>
<thead>
    <tr>
        <th>Rank</th>
        <th>Content</th>
        <th>UID</th>
    </tr>
</thead>
<tbody>
    <tr>

    </tr>
</tbody>
</table>

在我的 main.js 文件中:

var response = '[{"rank":"ss9", "content":"Alon", "UID":"5" }]';
/* response += ',{"rank":"6","content":"Tala","UID":"6"}]'; */
response = $.parseJSON(response);

$(function () {
    $.each(response, function (i, item) {
        $('<tr>').append(
            $('<td>').text(item.rank),
            $('<td>').text(item.content),
            $('<td>').text(item.UID)).appendTo('#binding-table');

    });
}); 

我有从 API 返回的响应。我正在解析响应并根据响应动态添加行。就我而言，我在标签内犯了错误。有人可以帮我解决我的错误吗？

Answer 1

除了表 ID 上缺少双引号这一事实外，我认为您必须“缓存” tbody 元素的引用，因此您不必为每个循环都使用选择器，比方说，更大的 json。

也就像@Enter Strandman 给你的建议一样，对于这种情况，最好使用datatables.net。

var response = '[{"rank":"ss9", "content":"Alon", "UID":"5" },{"rank":"6","content":"Tala","UID":"6"}]';
response = $.parseJSON(response);

$(function () {
    var tbody = $('#table_body');
    $.each(response, function (i, item) {
        $('<tr>').append(
            $('<td>').text(item.rank),
            $('<td>').text(item.content),
            $('<td>').text(item.UID)).appendTo(tbody);

    });
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed" id="binding-table">
<thead>
    <tr>
        <th>Rank</th>
        <th>Content</th>
        <th>UID</th>
    </tr>
</thead>
<tbody id="table_body">
</tbody>
</table>