javascript - 如何根据值为 HTML 表格单元格着色

Question

我有一个 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 数据，我的代码有点冗长.. 我已经在我的代码中注释了行，以便了解你们所有人，我在做什么

Answer 1

你可以在你的元素代码循环中做这样的事情:

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/