JSON內的CSS標籤

我有一些JSON文件的一些數據。我可以在沒有問題的情況下填充表格，問題是我想用CSS文件格式化一些單元格，並且卡住了。嘗試了幾種方法，沒有任何作品。基本上我怎麼匹配的HTML與jQuery數據上的每個id？JSON內的CSS標籤

的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 
    },

來源

2015-09-04 user3329074

有多少產品是你在寫什麼？換句話說，'data.products.length'的價值是什麼？超過1？ – gilly3

是的。現在20左右。 – user3329074

不清楚你在問什麼。發佈示例json以顯示「products.json」的外觀。 –

請勿使用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>

來源

2015-09-04 21:05:49 gilly3

完美！非常感謝！！ :) 工作就像一個魅力。（我是自學JavaScript，所以我真的很菜鳥錯誤） – user3329074

款式動態細胞（td S），應先分配class他們，而不是一個id。要有條件地執行此操作，可以使用if來檢查它們是否符合條件。沒有實際的json數據，我不能多說。

更新
如果你希望能夠解決數據位，你tr s各自應該有一個id和td是個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); 
});

來源

2015-09-04 21:03:47

JSON內的CSS標籤

回答

相關問題