JSON 中的 CSS 标记答案

【问题标题】：CSS tags inside JSONJSON 中的 CSS 标记
【发布时间】：2015-09-04 20:47:11
【问题描述】：

我有一个包含一些数据的 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
    },

【问题讨论】：

你写了多少产品？换句话说，data.products.length 的值是多少？超过 1 个？
是的。现在大约 20 点。
不清楚你在问什么。发布一个示例 json 来展示 products.json 的样子。
已更新。基本上我希望每个都有自己的 CSS 规则。如何在 JSON 中添加它？
每个都有自己的CSS规则？为什么？ CSS 规则 你的意思是它们应该是唯一可寻址的？你想达到什么目的？

【解决方案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>

【讨论】：

完美！！非常感谢！！ :) 工作就像一个魅力。（我是自学 JavaScript，所以我确实犯了菜鸟错误）

【解决方案2】：

要设置动态单元格 (tds) 的样式，您应该为它们分配 class，而不是 id。要有条件地做到这一点，您可以使用if 检查它们是否满足条件。没有实际的 json 数据，我不能多说。

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

JSON

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

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);
});

【讨论】：