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

Posted 2023-03-05

【中文标题】将新数据从 JSON 添加到现有表

【英文标题】：Adding new data from JSON to existing table

【发布时间】：2014-06-23 11:14:03

【问题描述】：

我正在尝试将新数据（来自 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');
        );

为什么它不起作用？

【问题讨论】：

你同意如果你追加到#MyTable 新元素将超出tbody 或thead 元素吗？

是的，我同意你的看法。而且我不知道如何更改/修复它。

希望对我有所帮助。谢谢。

使用item.A 而不是response[i].A

【参考方案1】：

你以错误的方式访问对象。试试这个代码 sn-p。

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

【参考方案2】：

使用 $('

').append 代替 $('').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 看到它的实际效果。

【讨论】：

为什么不访问像item.A 这样的对象而不是response[i].A？如果 DOM 中有两个 tbody 怎么办？

没有特别的理由不这样做，我只是从问题中复制了代码并进行了最小的更改，以帮助他看到差异。你的回答方式也一样好。

我相信最好也向 OP 展示最佳实践。虽然这只是我个人的意见:)

这里没有异议，我只是在这种情况下没有花时间去做。你真好！

【参考方案3】：

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

【参考方案4】：

试试下面的 sn-p。这会在 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>");                 
            );

【讨论】：

为什么不访问像item.A 这样的对象而不是response[i].A？

没有区别。我只是把它放在那里，因为这就是问题所在。

【参考方案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);