将JSON中的新数据添加到现有表格中

Question

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

例如，在我的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');
        });

为什么它不能工作？

- yoka

---

你是否同意，如果你将新元素添加到 #MyTable 中，这些新元素将不会在 tbody 或 thead 元素中？ - DontVoteMeDown

是的，我同意你的观点。但我不知道怎么改变/修复它。 - yoka

希望我有所帮助。谢谢。 - DontVoteMeDown

请使用item.A代替response[i].A。 - MD. Sahib Bin Mahboob

Answer 1

你将内容附加到表本身而不是 thead 或 tbody 元素上，这是应该做的。尝试更改 .appendTo 中的选择器为 #MyTable tbody，它将起作用。 此处有演示。

- DontVoteMeDown

Answer 2

你以错误的方式访问了对象。请尝试使用这段代码片段。

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

- MD. Sahib Bin Mahboob

Answer 3

使用 $('<tbody>').append 而不是 $('<tr>').html()。

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

你可以在 这个 JSFiddle 上看到它的效果。

- TML

---

为什么不像 item.A 一样访问对象，而是使用 response[i].A？如果 DOM 中有两个 tbody，该怎么办？ - MD. Sahib Bin Mahboob

没有特别的原因不这样做，我只是复制了问题中的代码，并进行了最小的更改，以帮助他看到区别。你的答案方式同样好。 - TML

我认为向 OP 展示最佳实践是最好的选择。虽然这只是我的个人意见 :) - MD. Sahib Bin Mahboob

没有任何异议，我只是在这种情况下没有花时间去处理。你做得很好！ - TML

Answer 4

尝试使用以下代码片段。这将在HTML中创建“tr”元素。

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

- thispatchofsky

---

为什么不像item.A那样访问对象，而是要用response[i].A呢？ - MD. Sahib Bin Mahboob

没关系，我只是把它放在那里，因为问题就是这样问的。 - thispatchofsky

Answer 5

做这个：

table_html = '';
$.each(response, function(index, value) {
table_html += "<tr><td>"+value["A"]+"</td><td>"+value["B"]+"</td><td>"+value["C"]+"</td></tr>"   
        });

给 <tbody> 标签添加一些 id。

$("tbodyid").html(table_html);

- Coderaemon