Javascript 有没有一种方法可以动态地将按钮添加到JSON表中？

我有一个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:

身份证件
名称
价格
描述
形象
加入篮子

表的代码：

$.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");
});

$.getJSON（'products.json'，函数（数据）{
var项目=[]；
$.each（数据、产品、功能（键、值）{
项目。推送（“”）；
项目。推送（“”）；
items.push（“+val.id+”）；
items.push（“+val.name+”）；
项目推送（“+val.price+”）；
items.push（“+val.description+”）；
items.push（“+”）；
});
$（“”，{html:items.join（“”}）.appendTo（“表”）；
});

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

代码，有点冗长来说明：

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

函数getprod（数据）{ var项目=[]； $.each（数据、产品、功能（键、值）{ 项目。推送（“”）； items.push（“+val.id+”）； items.push（“+val.name+”）； 项目推送（“+val.price+”）； items.push（“+val.description+”）； 项目。推送（“”）； 物品。推送（“购物车”）； 项目。推送（“”）； }); var tb=items.join（“”）； 控制台日志（tb）； $（“#myTable”）.find（'tbody'）.append（tb）； } $（'#myTable'）。在（'单击'，'.cartbutton'，函数（）上{ var行=$（this.parents（'tr'）； console.log（row.attr（'id'）、row.data（'category'）、row.data（'price'）； }); //我使用了一个函数来处理示例数据，您可以修改如下： //$.getJSON（'products.json'，getprod）； getprod（数据）；//移除以进行真正的调用

---

只需添加列即可？我不明白，既然你在添加专栏，为什么在这里再添加一个专栏是一个挑战。你能详细说明一下这个问题吗？所以我的产品表包含8种产品。我不知道如何让jquery在每行添加一个带有按钮的列。有没有办法在内容加载到表中时添加按钮？你添加一个带有img的按钮，只添加一个带有button元素的按钮。我尝试了这个方法，但没有成功。“mybutton”在TD列中添加按钮谢谢，这是我第一次使用javascript，我在线学习了一个教程，显然帮不了我多少忙。再次感谢。当然，我们都从一开始就开始了：）

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