user10561216
Reputation:
How to color HTML table cells according to their values
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>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
Upvotes: 0
Views: 2763
Answers (3)
Rajitha Alluri
Reputation: 117
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.
Upvotes: 0
jo_va
Reputation: 13963
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>Upvotes: 0
twain
Reputation: 1325
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/
Upvotes: 1
Related Questions
- Jquery coloring table cells according to condition and values
- Change table data value color depending on value using Javascript
- Change table row color based on value
- How to change color of a HTML table (dynamically created) cell based on a value?
- HTML and CSS - Changing text color of cell depending on value
- jQuery - color tr by cell value
- Set background colors of cells based on the value inside cell
- Change colour of table cells depending on value
- Color row based on cells value - Jquery
- Assigning colors to HTML table cells using javascript