title: How to color HTML table cells according to their values
body: <p>I have an HTML table that is populated with some JSON data via JavaScript.</p>
  
  <ul>
  <li>My table has both negative and positive values. I am trying to color these cells </li>
  <li>Like: if value is in between -100 to -1000 i want to color them with pink</li>
  <li>Like: if value is above -1000 eg: -1500,-1200 I want to color them with red</li>
  <li>similarly if values are positive, like +20,50,200, I want to color the cells green </li>
  <li>And if value is 0 then any other color</li>
  </ul>
  
  <p>I know i can do it with DOM manipulation in JavaScript but I am not understanding the logic to check the values.</p>
  
  <p><strong>my code snippet</strong></p>
  
  <p></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
      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 =&gt; {
      th = document.createElement("th");
      th.innerHTML = element; //populating outlet
      th.classList.add("text-center");
  
      headerRow.appendChild(th);
      outletWiseTotal[element] = 0;
      data.forEach(el =&gt; {
        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 =&gt; {
      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 =&gt; {
      let row = document.createElement("tr");
      td = document.createElement("td");
      td.innerHTML = element; //populating item code
      row.appendChild(td);
      let total = 0;
      outlets.forEach(outlet =&gt; {
        let el = 0;
        data.forEach(d =&gt; {
          if (d.itemcode == element &amp;&amp; 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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div align="center" class="table table-responsive"&gt;
    &lt;table id="BillCountTable"&gt;&lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As my code is little bit lengthy because of JSON data.. i have commented the lines in my code for knowing all of you, what i am doing where</p>