时间戳

首页 > 解决方案 > 如何根据 API 的响应在引导表中动态添加一行？

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

问题描述

<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 返回的响应。我正在解析响应并根据响应动态添加行。就我而言，我在标签内犯了错误。有人可以帮助我我的错误在哪里吗？

标签： htmlcsstwitter-bootstrap

解决方案

除了您在表 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>

推荐阅读