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.

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

Answer 3

使用$（＆＃39;＆lt; tbody＆gt;＆＃39;）。追加而不是$（＆＃39;＆lt; tr＆gt;＆＃39;）。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');
});

您可以在this JSFiddle处看到它。

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

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

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

5 个答案: