时间戳

首页 > 解决方案 > 如何迭代 JSON 数据并将结果插入相应的 HTML 表格行？

html - 如何迭代 JSON 数据并将结果插入相应的 HTML 表格行？

问题描述

我想将 JSON 数据放入现有的 HTML 表格行模板中，这些模板是动态创建的。

我得到了正确的 JSON 数据，但是当我试图将它放入 HTML 表时，只更新了一行。

这是 HTML 表格：

<table class="table">
<thead>
    <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>E-mail address</th>
        <th>Phone number</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <?php foreach($users['results'] as $u) { ?>
    <tr>
        <td class="align-middle" id="first_name"><?= $u->first_name; ?></td>
        <td class="align-middle" id="last_name"><?= $u->last_name; ?></td>
        <td class="align-middle" id="email"><?= $u->email; ?></td>
        <td class="align-middle" id="phone"><?= $u->phone; ?></td>
    </tr>
    <?php } ?>
</tbody>
</table>

表行是根据 SQL 查询动态生成的。

这是我的 JSON 数据：

{"results":[
                {
                  "first_name":"Some name",
                  "last_name":"Some name",
                  "email":"email_address",
                  "phone":"666633337"
                },
                { 
                  "first_name":"Some other name",
                  "last_name":"Some other last name",
                  "email":"email_address",
                  "phone":"234234324"
                }
           ]
}

这是我用 AJAX 尝试过的：

$.ajax({
            url : "filter_participants",
            method : "post",
            data: { view },
            dataType: "json",
            success: function(data) {
                $.each(data.results, function(index) {      
                        $('#first_name').html(data.results[index].first_name);
                        $('#last_name').html(data.results[index].last_name);
                        $('#email').html(data.results[index].email);
                        $('#phone').html(data.results[index].phone);
                    });
                }
        });

当我调用 AJAX 请求时，我想从表行中删除现有数据并从 JSON 结果中放入新数据。应根据 JSON 数据动态创建行，并且 AJAX 请求应能够更新相应数量的已创建行。

例如：

如果 JSON 数据中有 2 行，AJAX 应删除所有现有行并将 JSON 数据放入 2 个新行。

标签： htmljsonajax

解决方案

好的，我已经设法解决了我的问题。这是答案：

1. 首先，我需要编辑 HTML 表格，从 td 标签中删除 id 并为 tr 标签添加一个自定义类：

<?php foreach($users['results'] as $u) { ?>
<tr class="ajax-data">
    <td class="align-middle"><?= $u->first_name; ?></td>
    <td class="align-middle"><?= $u->last_name; ?></td>
    <td class="align-middle"><?= $u->email; ?></td>
    <td class="align-middle"><?= $u->phone; ?></td>
</tr>
<?php } ?>

2. 创建一个适当的 AJAX 操作，它将删除所有表行并使用来自服务器的 JSON 格式的数据创建一个新行：

$.ajax({
    url : "filter_participants",
    method : "post",
    data: { view },
    dataType: "json",
    success: function(data) {
        var tr = '';
        $('tr.ajax-data').remove();
        $.each(data.results, function(index) {
            tr += '<tr class="ajax-data">';
            tr += '<td class="align-middle">' + data.results[index].first_name + '</td>';
            tr += '<td class="align-middle">' + data.results[index].last_name + '</td>';
            tr += '<td class="align-middle">' + data.results[index].email + '</td>';
            tr += '<td class="align-middle">' + data.results[index].phone + '</td>';
            tr += '</tr>'
        });
        $('tbody').append(tr);
    }
});

就这样。随意，如果你有一些建议。

推荐阅读