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

您提供的标记无效。标题中的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

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

1 个答案: