0

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

Improve this question
2
  • If you're using jQuery then why are you not using it? Commented Feb 26, 2019 at 8:40
  • 1
    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. Commented Feb 26, 2019 at 8:49

3 Answers 3

Reset to default
1

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

sir i only want to color cell not the full row..as i am replacing row with td but its colouring other cells
0

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>

Improve this answer

Comments

0

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.

Improve this answer

Comments