javascript - 有没有办法将按钮动态添加到 JSON 表？

Question

我有一个包含来自 JSON 文件的产品的表格。我想添加一个列，其中包含每个产品的按钮。有办法做到这一点吗？

JSON 结构:

{
  "products" : [
    {
      "id" : "0",
      "name" : "Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - 
                UK-Layout",
      "price" : "119.99",
      "category" : "0",
      "description" : "Logitech 920-008017 G910 Orion Spectrum RGB Mechanical 
                       Gaming Keyboard - Black.",

HTML:

<table id =myTable class="table table-bordered table-striped table-hover">
  <thead id = table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Price</th>
    <th>Description</th>
    <th>Image</th>
    <th id = "add">Add to Basket</th>
  </thead>
</table> 

表格代码:

$.getJSON('products.json', function(data){
  var items = [];


  $.each(data.products, function(key, val){
    items.push("<tr data-category='"+val.category+"'>");
    items.push("<tr data-price='"+val.price+"'>");
    items.push("<td id=''"+key+"''>"+val.id+"</td>");
    items.push("<td id=''"+key+"''>"+val.name+"</td>");
    items.push("<td id=''"+key+"''>"+val.price+"</td>");
    items.push("<td id=''"+key+"''>"+val.description+"</td>");
    items.push("<td id=''"+key+"''>"+"<img src='"+val.images[0].src+"'width='150px'/></td>");


  });

  $("<tbody/>", {html:items.join("")}).appendTo("table");
});

Answer 1

您提供的标记无效。 header 中的 tr 未关闭，其中包含奇怪的 id。我认为没有理由将 tbody 添加到标记中。假设您有这张表:

<table id='myTable' class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
      <th>Description</th>
      <th>Image</th>
      <th>Add to Basket</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

现在您真正想要的是为每个产品附加一行。您的数组中有两个 tr 并且在该字符串数组中都没有正确关闭。我只是为每行创建了一行而不是两行，我认为没有理由嵌套 tr 但如果需要的话你可以修改，但你必须根据需要适本地关闭它们。

您没有为图像提供 JSON，因为您的 JSON 不完整，所以我做了一个简单的测试并添加了几个额外的对象来测试。

示例数据:

var data = {
  "products": [{
    "id": "0",
    "name": "Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - UK-Layout",
    "price": "119.99",
    "category": "0",
    "description": "Logitech 920-008017 G910 Orion Spectrum RGB Mechanical Gaming Keyboard - Black.",
    "images": "first"
  }, {
    "id": "1",
    "name": "testa",
    "price": "119.99",
    "category": "2",
    "description": "testa desc.",
    "images": "afred"
  }, {
    "id": "2",
    "name": "testb",
    "price": "119.99",
    "category": "2",
    "description": "testb desc.",
    "images": "bfred"
  }]
};

代码，为了说明有点冗长:

function getprod(data) {
  var items = [];
  $.each(data.products, function(key, val) {
    items.push("<tr data-category='" + val.category + "'");
    items.push(" id='" + key + "' data-price='" + val.price + "'>");
    items.push("<td class='row-id'>" + val.id + "</td>");
    items.push("<td class='row-name'>" + val.name + "</td>");
    items.push("<td class='row-price'>" + val.price + "</td>");
    items.push("<td class='row-description'>" + val.description + "</td>");
    items.push("<td><img alt='"+val.images+"' src='" +val.images+ "' width='150px'/></td>");
    items.push("<td><button type='button' class='cartbutton'>cart</button></td>");
    items.push("</tr>");
  });
  var tb = items.join("");
  console.log(tb);
  $("#myTable").find('tbody').append(tb);
}
$('#myTable').on('click', '.cartbutton', function() {
  var row = $(this).parents('tr');
  console.log(row.attr('id'), row.data('category'), row.data('price'));
});
// I used a function to work with the sample data, you can revise that below:
//$.getJSON('products.json',getprod);
getprod(data);// remove for real call