有沒有辦法將按鈕動態添加到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