我有一个 HTML 表，它通过 JavaScript 填充了一些 JSON 数据。
- 我的表格既有负值也有正值。我正在尝试为这些细胞着色
- 喜欢:如果值在 -100 到 -1000 之间，我想用粉红色给它们上色
- 喜欢:如果值高于 -1000 例如:-1500，-1200 我想用红色给它们上色
- 类似地，如果值为正，例如 +20,50,200，我想将单元格涂成绿色
- 如果值为 0 则任何其他颜色
我知道我可以在 JavaScript 中使用 DOM 操作来做到这一点，但我不理解检查值的逻辑。
我的代码片段
var data = [
{
"itemcode": "1125",
"itemname": "Khara Boondhi-L",
"outlet": "JAYANAGAR",
"difference": -35
},
{
"itemcode": "1126",
"itemname": "Khara Sev-L",
"outlet": "JAYANAGAR",
"difference": 0
},
{
"itemcode": "1127",
"itemname": "Butter Muruku-L",
"outlet": "JAYANAGAR",
"difference": -47
},
{
"itemcode": "1128",
"itemname": "Samosa-L",
"outlet": "JAYANAGAR",
"difference": -12
},
{
"itemcode": "1129",
"itemname": "Ambode-L",
"outlet": "JAYANAGAR",
"difference": 0
},
{
"itemcode": "1130",
"itemname": "Chow Chow-L",
"outlet": "JAYANAGAR",
"difference": 69
},
{
"itemcode": "1131",
"itemname": "Potato Chips",
"outlet": "JAYANAGAR",
"difference": 24
},
{
"itemcode": "1132",
"itemname": "Tangy Groundnut-L",
"outlet": "JAYANAGAR",
"difference": 216
},
{
"itemcode": "1133",
"itemname": "Rice Kodubale-L",
"outlet": "JAYANAGAR",
"difference": 105
},
{
"itemcode": "1134",
"itemname": "Puva Chivda-L",
"outlet": "JAYANAGAR",
"difference": 44
},
{
"itemcode": "1135",
"itemname": "Corn Flakes Masala-L",
"outlet": "JAYANAGAR",
"difference": -40
},
{
"itemcode": "1136",
"itemname": "Almond Honey Chocolate Cake",
"outlet": "JAYANAGAR",
"difference": -340
},
{
"itemcode": "1137",
"itemname": "Black Forest Cake",
"outlet": "JAYANAGAR",
"difference": 40
},
{
"itemcode": "1138",
"itemname": "Butterscotch Cake",
"outlet": "JAYANAGAR",
"difference": 80
},
{
"itemcode": "1139",
"itemname": "Chocolate chips cake",
"outlet": "JAYANAGAR",
"difference": -1240
},
{
"itemcode": "1140",
"itemname": "Chocolate Triffle Cake",
"outlet": "JAYANAGAR",
"difference": -2125
},
{
"itemcode": "1141",
"itemname": "Liche Chocolate Cake",
"outlet": "JAYANAGAR",
"difference": 20
},
{
"itemcode": "1142",
"itemname": "Mango Delight Cake",
"outlet": "JAYANAGAR",
"difference": 1450
},
{
"itemcode": "1143",
"itemname": "Mixed Fruit Chocolate Cake",
"outlet": "JAYANAGAR",
"difference": 130
},
{
"itemcode": "1144",
"itemname": "Peach Cake",
"outlet": "JAYANAGAR",
"difference": 835
},
{
"itemcode": "1145",
"itemname": "Pineapple Cake",
"outlet": "Mallesharam",
"difference": 0
},
{
"itemcode": "1146",
"itemname": "Strawberry Cake",
"outlet": "Mallesharam",
"difference": 26
},
{
"itemcode": "1147",
"itemname": "Plum Cake 250gm",
"outlet": "Mallesharam",
"difference": 90
},
{
"itemcode": "1148",
"itemname": "Plum Cake 500gm",
"outlet": "Mallesharam",
"difference": 1070
},
{
"itemcode": "1149",
"itemname": "Cherry White Forest",
"outlet": "Mallesharam",
"difference": 20
},
{
"itemcode": "1150",
"itemname": "Chocolate Almond Gautex",
"outlet": "Mallesharam",
"difference": 69
},
{
"itemcode": "1151",
"itemname": "Death By Chocolate",
"outlet": "Mallesharam",
"difference": 24
},
{
"itemcode": "1152",
"itemname": "Blue Berry",
"outlet": "Mallesharam",
"difference": 216
},
{
"itemcode": "1153",
"itemname": "Chocolate Ice-Cream",
"outlet": "Mallesharam",
"difference": 105
},
{
"itemcode": "1154",
"itemname": "French Vanilla Ice-cream",
"outlet": "Mallesharam",
"difference": 0
},
{
"itemcode": "1155",
"itemname": "Strawberry Ice-cream",
"outlet": "Mallesharam",
"difference": 112
},
{
"itemcode": "1156",
"itemname": "Butterscotch Ice-cream",
"outlet": "Mallesharam",
"difference": 0
},
{
"itemcode": "1157",
"itemname": "Pista Ice-cream",
"outlet": "Mallesharam",
"difference": -230
},
{
"itemcode": "1158",
"itemname": "Black Currant Ice-cream",
"outlet": "Mallesharam",
"difference": -120
},
{
"itemcode": "1159",
"itemname": "Mango Ice-cream",
"outlet": "Mallesharam",
"difference": -6700
},
{
"itemcode": "1160",
"itemname": "Tiramisu Ice-cream",
"outlet": "Mallesharam",
"difference": -90
},
{
"itemcode": "1161",
"itemname": "Cookies Ice-cream",
"outlet": "Mallesharam",
"difference": -1060
},
{
"itemcode": "1162",
"itemname": "Cherry Mania Ice-Cream",
"outlet": "Mallesharam",
"difference": 10
},
{
"itemcode": "1285",
"itemname": "Set Menu",
"outlet": "Mallesharam",
"difference": 0
}
]
let formatData = function(data) {
let itemCode = [];
let outlets = [];
data.forEach(element => {
if (itemCode.indexOf(element.itemcode) == -1) {
itemCode.push(element.itemcode);
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
return {
data: data,
itemCode: itemCode,
outlets: outlets,
};
};
let renderTable = function(data) {
itemCode = data.itemCode;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("BillCountTable");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Item Code"; // header
th.classList.add("text-center");
headerRow.appendChild(th);
let outletWiseTotal = {};
th = document.createElement("th");
th.innerHTML = "Item Name"; //header
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element; //populating outlet
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.difference); //calculating total outlet wise
}
});
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = outletWiseTotal[element].toLocaleString('en-in'); //populating outlet wise total
th.classList.add("text-right");
headerRow.appendChild(th);
});
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-Center");
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
itemCode.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element; //populating item code
row.appendChild(td);
let total = 0;
outlets.forEach(outlet => {
let el = 0;
data.forEach(d => {
if (d.itemcode == element && d.outlet == outlet) {
total += parseInt(d.difference);
el = d.difference;
In = d.itemname;
}
});
td = document.createElement("td");
td.innerHTML = el.toLocaleString('en-in');
td.classList.add("text-right");
row.appendChild(td);
});
td = document.createElement("td");
td.innerHTML = In; //populating item name
td.classList.add("text-left");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
});
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div align="center" class="table table-responsive">
<table id="BillCountTable"></table>
</div>由于 JSON 数据，我的代码有点冗长.. 我已经在我的代码中注释了行，以便了解你们所有人，我在做什么
最佳答案
你可以在你的元素代码循环中做这样的事情:
if(element < -1000) td.style="background:red";
else if(element >= -1000 && element <= -100) td.style="background: pink";
else if(element == 0) td.style="background: ANY OTHER COLOR";
else if(element > 0) td.style="background: green";
或者，您可以添加具有特定颜色的类，而不是使用 style 标签
编辑: 如果你想要整行，只需将样式/类赋予行元素，如下所示:
let row = document.createElement("tr");
if(element < -1000) row.style="background:red";
else if(element >= -1000 && element <= -100) row.style="background: pink";
else if(element == 0) row.style="background: ANY OTHER COLOR";
else if(element > 0) row.style="background: green";
JSFiddle:https://jsfiddle.net/w15psebd/
关于javascript - 如何根据值为 HTML 表格单元格着色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54881025/