Question

我有一个带有一些数据的JSON文件。我可以在没有问题的情况下填充表格，问题是我想用CSS文件格式化一些单元格而且卡住了。一直在尝试几种方式，但都没有效果基本上我如何将json数据与html上的每个id匹配？

的JavaScript

    var products=[];

$.getJSON('products.json',function(data){
    $.each(data.products, function(i, f){
        var tblRow = "<tr><td><img src=" + f.image_url + "></td></tr>" + "<tr><td>" + f.title + "</td></tr>" + "<tr><td>" + f.price + "</td>" + "<td>" + f.old_price + "</td></tr>"
        $(tblRow).appendTo("#list_products tbody");
    });
});

HTML

    <table id="list_products">
        <thead>
        </thead>
        <tbody>
            <tr><td id="prod_img"></td></tr>
            <tr><td id="title"></td></tr>
            <tr>
                <td id="price"></td>
                <td id="price_org"></td>
            </tr>
        </tbody>
    </table>

JSON

    {
"products": [
    {
        "title": "Revolutionary Mini-UFO (4 pack)",
        "image_url": "https://cdn.fyndiq.se/product/fa/87/d7/d871294e94d095743c355b98b827b4a9a0/original.png",
        "old_price": "99 kr",
        "price": "69 kr",
        "price_amount": 69.00
    },

Answer 1

请勿使用id，因为这些必须是唯一的，并且您拥有“约20”种产品。而是使用class。只需将类名添加到生成HTML的代码中：

var tblRow = "<tr><td class='prod_img'><img src=" + f.image_url + "></td></tr>" +
    "<tr><td class='title'>" + f.title + "</td></tr>" +
    "<tr><td class='price'>" + f.price + "</td>" +
    "<td class='price_org'>" + f.old_price + "</td></tr>";

演示：

var products = [{
    "title": "Revolutionary Mini-UFO (4 pack)",
    "image_url": "https://cdn.fyndiq.se/product/fa/87/d7/d871294e94d095743c355b98b827b4a9a0/original.png",
    "old_price": "99 kr",
    "price": "69 kr",
    "price_amount": 69.00
}];

$.each(products, function(i, f) {
    var tblRow = "<tr><td class='prod_img'><img src=" + f.image_url + "></td></tr>" +
        "<tr><td class='title'>" + f.title + "</td></tr>" +
        "<tr><td class='price'>" + f.price + "</td>" +
        "<td class='price_org'>" + f.old_price + "</td></tr>";
    $(tblRow).appendTo("#list_products tbody");
});

body {
    font-family: sans-serif;
}
.prod_img img {
    max-width: 80px;
}
.title {
    font-size: 1.25em;
}
.price_org {
    text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="list_products">
    <tbody></tbody>
</table>

Answer 2

要设置动态单元格（td s）的样式，您应该为它们分配class，而不是id。要有条件地执行此操作，您可以使用if检查它们是否符合条件。没有实际的json数据，我不能多说。

<强>更新
如果您希望能够处理数据位，则tr每个应该有id，而td是class。如果您可以控制要发送的json，我建议您为每个产品添加一个ID（可能是SKU），并将其用作行的ID：

JSON

"products": [
  {
    "id": 3812,
    "title": "Revolutionary Mini-UFO (4 pack)",
    ...
  },
  {
    "id": 7155,
    "title": ...
    ...
  }
]

JS

var rows = '';
$.getJSON('products.json',function(data){
  $.each(data.products, function(i, p){
    rows += '<tr id="product_'+p.id+'">';
    rows += '<td class="title">'+p.title+'</td>';
    rows += '... rest of tds ...';
    rows += '</tr>';
  });
  $("#list_products tbody").append(rows);
});

JSON中的CSS标签

2 个答案: