Question

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

我正在获取正确的JSON数据，但是当我尝试将其放入HTML表时，只会更新一行。

这是HTML表格：

// ==UserScript==
// @name     sr wiki latin
// @version  1
// @include     https://sr.wikipedia.org*
// @include     http://sr.wikipedia.org*
// @grant    none
// ==/UserScript==

var url = window.location.host;

if (url.match("sr.wikipedia.org/sr-el") === null) {
    url = window.location.href;
    if  (url.match("//sr.wikipedia.org/wiki") !== null){
        url = url.replace("//sr.wikipedia.org/wiki", "//sr.wikipedia.org/sr-el");
    } elseif (url.match("//sr.wikipedia.org/sr-ec") !== null){
        url = url.replace("//sr.wikipedia.org/sr-ec", "//sr.wikipedia.org/sr-el");
    } elseif (url.match("//sr.wikipedia.org/sr") !== null){
        url = url.replace("//sr.wikipedia.org/sr", "//sr.wikipedia.org/sr-el");
    } else
    {
        return;
    }

    console.log(url);
    window.location.replace(url);
}

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

这是我的JSON数据：

<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>

这是我尝试使用AJAX的方法：

{"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请求时，我想从表行中删除现有数据，并从JSON结果中放入新数据。应该基于JSON数据动态创建行，并且AJAX请求应该能够更新相应数量的已创建行。

例如：

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

Answer 1

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

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

仅此而已。如果您有任何建议，请放心。

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

1 个答案: