How to color HTML table cells according to their values

html table cell background color
change html table cell color depending on its value javascript
change background color based on value html css
html conditional formatting color
change row color based on cell value javascript
css conditional formatting based on value
javascript change table row background-color based on value
color a table cell

I have an HTML table that is populated with some JSON data via JavaScript.

  • My table has both negative and positive values. I am trying to color these cells
  • Like: if value is in between -100 to -1000 i want to color them with pink
  • Like: if value is above -1000 eg: -1500,-1200 I want to color them with red
  • similarly if values are positive, like +20,50,200, I want to color the cells green
  • And if value is 0 then any other color

I know i can do it with DOM manipulation in JavaScript but I am not understanding the logic to check the values.

my code snippet

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>

You can just do something like this inside your loop of the item codes:

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

Alternatively you can add classes with the specific color instead of using the style tag

Edit: If you want it for the whole row, just give the style/class to the row element like this:

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/

Conditional formatting of color or images within table cells using html, Imagine you have a field in your data called status, which gives the status of each order. The possible values for status are: Paid Shipped Returned While� In HTML, table background color is defined using Cascading Style Sheets (CSS). Specifically, you use the background-color property to define background color. You can apply this property against the whole table, a row, or a single cell. Below are some examples of applying background color to a table in HTML.

You can use classes to add a different style to each cell and a function to determine the class to add to the cell from its value. This will allows you to keep the styling specified in your 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';
  }
}

When creating the td, you use it like this:

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>

HTML Table Background Color, Change the background color of your HTML tables with these copy/paste but to the table cell in question (i.e. the td tag or the th tag, depending on whether the CSS properties, functions, @-rules, data types, color values, and more — all on� You can use the tr:nth-child(rownumber) to color a particular row in a table using CSS. tr:nth-child(3) { background-color: green; color:white; } Above code select the 3 row from top (including table head row) and color background as green and foreground as white.

You can apply css based on the condition as per your requirement in 'itemCode' foreach loop. Make sure you applied logic on 'el' not on element to apply css only on td's.

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);
  });

Hope this helps.

Solved: How to color a table row based on a cell's value?, I am trying to color the table in red, yellow, and green using the numbers The result i get is all table rows in green, regardles of the value. .splunk.com/ answers/306849/rangemap-cell-formatting-for-multiple-tables.html. HTML Tag Reference HTML Browser Support HTML Event Reference HTML Color Reference HTML MAX_VALUE MIN_VALUE NEGATIVE Alert the innerHTML of the first cell in

Use CSS to change the style of each row depending on the content , We are going to create a simple to do list: the HTML template: column be bold in the Awesome Table but only certain rows be a color based on the color column and I� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

HTML tr tag, A simple HTML table with three rows; one header row and two data rows: <table> <tr> How to add background-color to a table row (with CSS):. <table> Value Description; colspan: number: Specifies the number of columns a cell should span: headers: header_id: Specifies one or more header cells a cell is related to: rowspan: number: Sets the number of rows a cell should span

HTML table basics, That just about wraps up the basics of HTML Tables. A table is a structured set of data made up of rows and columns (tabular data). Tables on the other hand are sized according to their content by default, so extra The values for your style attribute are background-color:#DCC48E; border:4px solid� According to the value returned in 'Color' (namely Green, Yellow or Red), the entire row's background color needs to be set through (I assume) a mix of CSS classes and JavaScript (different lines in the Forms table can then have different background colors).

Comments
  • If you're using jQuery then why are you not using it?
  • The formulation of your question is not clear: You mean each row has among other 2 columns 'JAYANAGAR' and 'Mallesharam', one of the is egal to 0 and the other has a value different from 0, and may be positive or negative. You want to set the color of the entire row according to the values of the 2 columns by consedering for each row the column with the value not equal to 0.
  • sir i only want to color cell not the full row..as i am replacing row with td but its colouring other cells