javascript - 使用 AJAX 根据数据库输出动态附加

Question

我正在尝试将多行动态附加到现有表(根据从数据库获取的结果)。

我的html代码

<table width="100%" border="1" class="queriedResponders">
                            <tbody>
                            <tr>
                                <th><strong>Select</strong></th>
                                <th><strong>Responder Name</strong></th>
                                <th><strong>Responder Company</strong></th>
                                <th><strong>Responder Number</strong></th>
                                <th><strong>City</strong></th>
                                <th><strong>Distance(Km)</strong></th>
                            </tr>
                            </tbody>
                        </table>

我的 jQuery 代码

$.ajax({
                data: data,
                url: url,
                type: 'POST',
                datatype: 'JSON',
                success: function (response) {
                    console.log(response);
                    var result = $.parseJSON(response);
                    var count = result.length;
                    for (var i = 0; i < count; i++) {
                        var $row = $("<tr><td><input type='radio' name='assignRadio'></td><td>" + result[i].name + "</td><td> Murgency Global Network</td><td>" + result[i].number + "</td><td>" + result[i].city + "</td><td> 0.5 Km</td></tr>");
                        $('table.queriedResponder > tr:last').append($row);
                    }
                    console.log($row);
                }
            });
        });

请注意:- 我得到了所需的结果，因为我已通过控制台记录了输出，该输出是一个 JSON 对象，如下面粘贴的 1

[{"name":"mihir panchal","company":"","number":"00919664804737","city":""}]

请指导我哪里出错了

Answer 1

两件事:

1. 您没有引用正确的元素。您的表具有 queriedResponders 类，并且您的目标是 queriedResponder
2. 您应该附加到 tbody 而不是 tr

这两件事结合起来会产生这样的结果:

$('table.queriedResponders tbody:last').append($row);

我简化了响应以获得一个有效的示例:

var result = [{
  "name": "mihir panchal",
  "company": "",
  "number": "00919664804737",
  "city": ""
}];

var count = result.length;
for (var i = 0; i < count; i++) {
  var $row = $("<tr><td><input type='radio' name='assignRadio'></td><td>" + result[i].name + "</td><td> Murgency Global Network</td><td>" + result[i].number + "</td><td>" + result[i].city + "</td><td> 0.5 Km</td></tr>");
  $('table.queriedResponders tbody:last').append($row);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1" class="queriedResponders">
  <tbody>
    <tr>
      <th><strong>Select</strong></th>
      <th><strong>Responder Name</strong></th>
      <th><strong>Responder Company</strong></th>
      <th><strong>Responder Number</strong></th>
      <th><strong>City</strong></th>
      <th><strong>Distance(Km)</strong></th>
    </tr>
  </tbody>
</table>