Question

它正确地将数据保存到字符串中，但如何在表格中显示数据？为什么这段代码不起作用？ Javascript代码：

$(document).ready(function () {
$.getJSON("http://wt.ops.few.vu.nl/api/32464776",
function (data) {
var tr;
for (var i = 0; i < data.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + data[i].category + "</td>");
    tr.append("<td>" + data[i].name + "</td>");
    tr.append("<td>" + data[i].amount + "</td>");
    tr.append("<td>" + data[i].location + "</td>");
    tr.append("<td>" + data[i].date + "</td>");
    $('table').append(tr);
}
});
});

HTML代码:(第一个条目只是示例，我需要点击提交时添加的数据，以显示自己）

<table id="tabel1" class="sortable">
<caption> <strong>Product Inventory List</strong> </caption>
<tr>
    <th> Name </th> <th> Category </th> <th> Amount </th> <th> Location </th> <th> Purchase Date </th>
</tr>
<tr>
    <td> Banana </td> <td> Fruit </td> <td> 1 </td> <td> Amsterdam </td> <td> 2015-11-21 </td>
</tr>
<tr>
    <td> Shirt </td> <td> Clothes </td> <td> 2 </td> <td> Ijsselstein </td> <td> 2015-09-01 </td>
</tr>
<tr>
    <td> Laptop </td> <td> Electronics </td> <td> 1 </td> <td> Aalsmeer </td> <td> 2014-12-31 </td>
</tr>

并链接到脚本：

<link rel="stylesheet" type="text/css" href="css.css"> <script src= adddata.js></script>

Answer 1

您引用了错误的表：$('table')它应该是$('#tabel1')。

以下是一个例子：

$(document).ready(function () {
  $.getJSON("http://wt.ops.few.vu.nl/api/32464776",
  function (data) {
    for (var i = 0; i < data.length; i++) {
        $('#tabel1').append("<tr><td>" + data[i].category + "</td></tr>");
    }
  });
});

编辑：实际上，问题在于此行$('<tr/>');，您可以在此处看到有关如何将数据附加到表格的更多示例：Add table row in jQuery

如何在不刷新页面的情况下将JSON数据添加到表中？

1 个答案: