Introduction
In this example I am going to show you how to color HTML table’s cells based on condition. The condition may be a value range, for example, HTML table cells (<td/>
) have certain values and based on values you can choose background color of the cells.
I am using pure JavaScript to iterate through rows and columns of the HTML table and applying the background colors to the columns of the rows.
Related Posts:
Prerequisites
Knowledge of HTML, CSS, JavaScript
Colorful Table
Let’s take an example of the following table. I want to apply different colors on cell data based on their range of values.
In the above HTML table, there is no background color for the cell data. Once I apply color to each cell data based on their value, the table will look like the following image:
The above table has been now colorful by applying different background colors to each cell data except the last column of the table.
Conditional Cell Color
Now I have the following sample HTML table data:
<table id="sales-info" border="1" cellpadding="4" cellspacing="1" style="margin: auto;">
<thead>
<tr>
<th>Product Id</th>
<th>Price</th>
<th>Sale Price</th>
<th>Sales Count</th>
<th>Sale Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>30000</td>
<td>35000</td>
<td>55</td>
<td>02-04-2018</td>
</tr>
<tr>
<td>2</td>
<td>30300</td>
<td>37030</td>
<td>43</td>
<td>03-04-2018</td>
</tr>
<tr>
<td>3</td>
<td>39010</td>
<td>48700</td>
<td>145</td>
<td>04-04-2018</td>
</tr>
<tr>
<td>4</td>
<td>15000</td>
<td>17505</td>
<td>251</td>
<td>05-04-2018</td>
</tr>
<tr>
<td>5</td>
<td>18000</td>
<td>22080</td>
<td>178</td>
<td>05-04-2018</td>
</tr>
<tr>
<td>6</td>
<td>30500</td>
<td>34040</td>
<td>58</td>
<td>05-04-2018</td>
</tr>
<tr>
<td>7</td>
<td>2000</td>
<td>2500</td>
<td>68</td>
<td>06-04-2018</td>
</tr>
<tr>
<td>8</td>
<td>45871</td>
<td>55894</td>
<td>165</td>
<td>07-04-2018</td>
</tr>
</tbody>
</table>
I am using JavaScript to iterate through rows and cells of the HTML table and reading the cell value by using innerText
(or textContent
) property of the cell.
Based on the cell data I am applying RGBA()
function to apply the background color. You may also apply color names or values instead of RGBA()
function to apply colors.
var t = document.getElementById('sales-info');
if(t) {
Array.from(t.rows).forEach((tr, rowIdx) => {
Array.from(tr.cells).forEach((cell, cellIdx) => {
if (cell.innerText == '') {
cell.style.backgroundColor = 'RGBA(85,83,108,0.4)';
}else if (cell.innerText >=0 && cell.innerText <=15) {
cell.style.backgroundColor = 'RGBA(255,198,191,0.4)';
}else if (cell.innerText > 15 && cell.innerText <=20) {
cell.style.backgroundColor = 'RGBA(170,214,136,0.4)';
}else if (cell.innerText > 20 && cell.innerText <=25) {
cell.style.backgroundColor = 'RGBA(152,195,119,0.6)';
}else if (cell.innerText > 25 && cell.innerText <=30) {
cell.style.backgroundColor = 'RGBA(139,189,120,0.9)';
}else if (cell.innerText > 30 && cell.innerText <=60) {
cell.style.backgroundColor = 'RGBA(94,167,88,0.9)';
}else if (cell.innerText > 60 && cell.innerText <=150) {
cell.style.backgroundColor = 'RGBA(88,157,65,0.3)';
}else if (cell.innerText > 150 && cell.innerText <=10000) {
cell.style.backgroundColor = 'RGBA(95,160,97,0.6)';
}else if (cell.innerText > 10000 && cell.innerText <=20000) {
cell.style.backgroundColor = 'RGBA(105,170,90,0.7)';
}else if (cell.innerText > 20000 && cell.innerText <=30000) {
cell.style.backgroundColor = 'RGBA(115,164,76,0.6)';
}else if (cell.innerText > 30000) {
cell.style.backgroundColor = 'RGBA(98,143,94,0.4)';
}
});
});
}
The other way of reading the rows and columns of the HTML table and applying color to each cell is given below:
var table = document.getElementById("sales-info");
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, cell; cell = row.cells[j]; j++) {
if (cell.innerText == '') {
cell.style.backgroundColor = 'RGBA(85,83,108,0.4)';
}else if (cell.innerText >=0 && cell.innerText <=15) {
cell.style.backgroundColor = 'RGBA(255,198,191,0.4)';
}else if (cell.innerText > 15 && cell.innerText <=20) {
cell.style.backgroundColor = 'RGBA(170,214,136,0.4)';
}else if (cell.innerText > 20 && cell.innerText <=25) {
cell.style.backgroundColor = 'RGBA(152,195,119,0.6)';
}else if (cell.innerText > 25 && cell.innerText <=30) {
cell.style.backgroundColor = 'RGBA(139,189,120,0.9)';
}else if (cell.innerText > 30 && cell.innerText <=60) {
cell.style.backgroundColor = 'RGBA(94,167,88,0.9)';
}else if (cell.innerText > 60 && cell.innerText <=150) {
cell.style.backgroundColor = 'RGBA(88,157,65,0.3)';
}else if (cell.innerText > 150 && cell.innerText <=10000) {
cell.style.backgroundColor = 'RGBA(95,160,97,0.6)';
}else if (cell.innerText > 10000 && cell.innerText <=20000) {
cell.style.backgroundColor = 'RGBA(105,170,90,0.7)';
}else if (cell.innerText > 20000 && cell.innerText <=30000) {
cell.style.backgroundColor = 'RGBA(115,164,76,0.6)';
}else if (cell.innerText > 30000) {
cell.style.backgroundColor = 'RGBA(98,143,94,0.4)';
}
}
}
Even you can read each column to have same color or each row to have the same color.
Your work is appreciate. Thank you