如何向表中添加行？答案

【问题标题】：How can I add rows to a table?如何向表中添加行？
【发布时间】：2021-04-23 03:05:20
【问题描述】：

我正在尝试从服务器获取数据，这是一长串对象，例如：

{
  "id": ,
  "product": "Candy",
  "Country": "",
  "date": "",
  "amount": ,
  "image": "candy.jpg"
  "id": ,
  "product": "Chips",
  "Country": "",
  "date": "",
  "amount": ,
  "image": "chips"
}

正如您在上面看到的，这是一行接一行，我在 Javascript 中有一个函数，我从服务器获取数据并将其放入表中。但它只给了我所有的数据，而不是在单独的行中。

Candy Africa June 2022 75 kg candy.jpg Chips America July 2022 65 kg chips.jpg

所以最后我想要一张这样的表格：

（想象成一张桌子）

Product  Country  Date       Amount  Image
Candy    Africa   June 2022  75 kg   candy.jpg
Chips    America  July 2022  65 kg   chips.jpg

这是我现在的代码：

function createTable() {
  $(document).ready(function () {
    setTimeout(function () {
      $.ajax({
        url: "LINK",
        type: 'GET',
        dataType: 'json',

        success: function (data) {
          $("#inputTable").html(data);

          $(data).each(function (index, info) {

            $('#inputTable').append('<td>' + info.product +  '</td>') +
            $('#inputTable').append('<td>' + info.country + '</td>')  +
            $('#inputTable').append('<td>' + info.date + '</td>')  +
            $('#inputTable').append('<td>' + info.amount + '</td>' ) +
            $('#inputTable').append('<td>' + info.image  + '</td>')

          });
        }
      });
    }, 1);
  });
}

【问题讨论】：

为什么要将 jQuery 方法调用与+ 连接起来？

标签： javascript html dynamic html-table

【解决方案1】：

您可以尝试使用 .innerHTML，它对我来说更容易

【讨论】：

这不是一个完整的答案。

【解决方案2】：

每个对象都需要位于单独的表格行中。

为此，请将每个对象的 <td> 元素放在单个 <tr> 元素中。

const inputTable = $('#inputTable');

// add heading to table
inputTable.empty();
inputTable.append(`
  <tr>
    <th>Product</th>
    <th>Country</th>
    <th>Date</th>
    <th>Amount</th>
    <th>Image</th>
  </tr>
`);

// add each row to table
$(data).each(function (index, info) {
  
  inputTable.append(`
    <tr>
      <td>${info.product}</td>
      <td>${info.country}</td>
      <td>${info.date}</td>
      <td>${info.amount}</td>
      <td>${info.image}</td>
    </tr>
  `);
  
});

【讨论】：

【解决方案3】：

来自服务器的数据不是正确的 JSON，它应该是一个对象数组：

[{
  "id": 28252,
  "product": "Candy",
  "Country": "Africa",
  "date": "june 2022",
  "amount": 75,
  "image": "candy.jpg"}.{
  "id": 28252,
  "product": "Chips",
  "Country": "America",
  "date": "july 2022",
  "amount": 65,
  "image": "chips"
}]

但是，如果您无法控制数据的格式，那么您可以从字符串将数据重建为正确的格式。

我可以通过在字符串中搜索 "id" 并将其替换为 '},{"id"' 来做到这一点。逗号是这样我们得到除了第一个“id”之外的每一个。

您还需要在json字符串的开头添加数组指示符，例如：

function createTable() {
  $(document).ready(function () {
    setTimeout(function () {
      $.ajax({
        url: "LINK",
        type: 'GET',
        dataType: 'json',


        success: function (data) {
          $("#inputTable").html(data);  //Not sure what this line is for? See the raw data?
     
          data = "[" + data + "]"; //it's an array
           data = data.replace(',"id"','},{"id"');     
          $(data).each(function (index, info) {

            $('#inputTable').append('<td>' + info.product +  '</td>') +
              $('#inputTable').append('<td>' + info.country + '</td>')  +
              $('#inputTable').append('<td>' + info.date + '</td>')  +
              $('#inputTable').append('<td>' + info.amount + '</td>' ) + 
              $('#inputTable').append('<td>' + info.image  + '</td>') 


            
          });
        }
      });
    }, 1);
  });
}

【讨论】：