如何根据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 tag

编辑： 如果要在整行中使用它，只需将样式/类分配给row元素，如下所示：

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/

Answer 2

您可以使用类为每个单元格添加不同的样式，并使用函数来确定要从其值添加到单元格的类。这将允许您保留CSS中指定的样式：

function getColorClass(val) {
  const value = parseFloat(val);
  if (value < -1000) {
    return 'color1';
  } else if (value >= -1000 && value < -100) {
    return 'color2';
  } else if (value > 0) {
    return 'color3';
  } else if (value === 0) {
    return 'color4';
  }
}

在创建td时，您可以像这样使用它：

td.classList.add(getColorClass(el));

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
  }
]
function getColorClass(val) {
  const value = parseFloat(val);
  if (value < -1000) {
    return 'color1';
  } else if (value >= -1000 && value < -100) {
    return 'color2';
  } else if (value > 0) {
    return 'color3';
  } else if (value === 0) {
    return 'color4';
  }
}

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(getColorClass(el));
      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);

.color1 {
  background-color: #f55;
}
.color2 {
  background-color: pink;
}
.color3 {
  background-color: #0a0;
}
.color4 {
  background-color: #aaa;
}

<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>

Answer 3

您可以根据条件在'itemCode'foreach循环中应用CSS。确保您对元素“ el”应用了逻辑，而不对元素ts应用了css。

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;
            }
          });
          console.log(el);
          td = document.createElement("td");
          td.innerHTML = el.toLocaleString("en-in");
          td.classList.add("text-right");

          var tdVal = el;
          if (tdVal <= -1000) {
            td.style="background: pink";
          } else if (tdVal > -1000 && tdVal< -100) {
            td.style="background: red";
          } else if (tdVal > 0) {
            td.style="background: green";
          } else if (tdVal === 0) {
            td.style="background: grey";
          }
      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);
  });

希望这会有所帮助。