有没有办法将按钮动态添加到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

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