javascript - 将新数据从 JSON 添加到现有表

Question

我正在尝试将新数据(来自 JSON)添加到现有表(使用 jquery)。

例如，在我的 html 中有这个表格:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="Filter Columns" id="MyTable">
  <thead>
    <tr>
      <th data-priority="1">A</th>
      <th data-priority="2">B</th>
      <th data-priority="3">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
    </tr>
  </tbody>
  </table>

我正在尝试这样做(从 JSON 添加新数据):

var response = [{
      "A":"a2",
      "B":"b2",
      "C":"c2"
     },
     {
      "A":"a3",
      "B":"b3",
      "C":"c3"
    },
    {
      "A":"a4",
      "B":"b4",
      "C":"c4"
    }];

    $.each(response, function(i, item) {
                $('<tr>').html(
                //"<tr>" +
                "<td>" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>" + "</tr>").appendTo('#MyTable');
        });

为什么它不起作用？

Answer 1

您将内容附加到表格本身，而不是 thead 或 tbody 元素，这是应该做的。尝试将 .appendTo 中的选择器更改为 #MyTable tbody，它将起作用。 Demo here.