HTML Table Conditional Cell Color by Value Ranges
Question
I have rendered a HTML file from a Pandas DataFrame which I'm trying to style the cell color based of the cell value. I'm able to do this with the html script below using some JS and CSS:
<!DOCTYPE html> <html lang="en"> <head> <title>DATA FRAME TABLE</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- ## WORING HTML --> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css"> <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css"> <link rel="stylesheet" type="text/css" href="vendor/perfect-scrollbar/perfect-scrollbar.css"> <link rel="stylesheet" type="text/css" href="css/util.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <table id="status_report" border="1" class="table table-hover" data-vertable="ver1"> <tbody style="text-align: center;"> <tr> <td>Name</td> <td>Round 1</td> <td>Round 2</td> <td>Round 3</td> <td>Round 4</td> <td>Avg</td> </tr> <tr> <td>Ben</td> <td>19</td> <td>24</td> <td>22</td> <td>27</td> <td>23.0</td> </tr> <tr> <td>Harry</td> <td>21</td> <td>19</td> <td>15</td> <td>19</td> <td>18.5</td> </tr> <tr> <td>Tom</td> <td>10</td> <td>22</td> <td>18</td> <td>21</td> <td>17.8</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>19</td> <td>16</td> <td>17</td> <td>17.5</td> </tr> <tr> <td>Angus</td> <td>13</td> <td>-</td> <td>21</td> <td>19</td> <td>17.2</td> </tr> </tbody> </table> <script> var colorMap = { "-": "RGBA(85,83,108,0.4)", 0 : "RGBA(255,198,191,0.4)", 1 : "RGBA(255,198,191,0.4)", 2 : "RGBA(255,198,191,0.4)", 3 : "RGBA(255,198,191,0.4)", 4 : "RGBA(255,198,191,0.4)", 5 : "RGBA(255,198,191,0.4)", 6 : "RGBA(255,198,191,0.4)", 7 : "RGBA(255,198,191,0.4)", 8 : "RGBA(255,198,191,0.4)", 9 : "RGBA(255,198,191,0.4)", 10 : "RGBA(255,198,191,0.4)", 11 : "RGBA(255,198,191,0.4)", 12 : "RGBA(255,198,191,0.4)", 13 : "RGBA(255,198,191,0.4)", 14 : "RGBA(255,198,191,0.4)", 15 : "RGBA(170,214,136,0.4)", 16 : "RGBA(170,214,136,0.4)", 17 : "RGBA(170,214,136,0.4)", 18 : "RGBA(170,214,136,0.4)", 19 : "RGBA(170,214,136,0.4)", 20 : "RGBA(152,195,119,0.6)", 21 : "RGBA(152,195,119,0.6)", 22 : "RGBA(152,195,119,0.6)", 23 : "RGBA(152,195,119,0.6)", 24 : "RGBA(152,195,119,0.6)", 25 : "RGBA(139,189,120,0.9)", 26 : "RGBA(139,189,120,0.9)", 27 : "RGBA(139,189,120,0.9)", 28 : "RGBA(139,189,120,0.9)", 29 : "RGBA(139,189,120,0.9)", 30 : "RGBA(94,167,88,0.9)", }; $('#status_report td').css('background-color', function(){ return colorMap[$(this).text()] || ''; }); </script> </body> </html>
However I realise the ColorMap script is very inefficient and not exactly what I'm trying to do. What I really would like to do is have the ColorMap based on ranges - not single integers written out one by one. I have tried doing something similar however using ranges but I'm inexperienced with JS and CSS.
<script>
var colorMap = {
"-": "RGBA(85,83,108,0.4)",
0-15 : "RGBA(255,198,191,0.4)", # Light Red
15-20 : "RGBA(170,214,136,0.4)", # Lightest green
20-25 : "RGBA(152,195,119,0.6)", # Light Green
25-30 : "RGBA(139,189,120,0.9)", # Dark Green
30+ : "RGBA(94,167,88,0.9)", # Darkest Green
};
$('#status_report td').css('background-color', function(){
return colorMap[$(this).text()] || '';
});
</script>
I know this method doesn't work with the color map, but I want to use ranges to cater for new values being added - for example values higher than 30. It also want it to apply this conditional format to the average columns - so float values in this case.
I feel using a color map may not be the best solution for this. Any suggestions how I can approach this problem?
2 answers
solution1
2 2022-05-23 11:05:30
More compact code, easier to customise colorMap .
const colourMap = { "-": "RGBA(85,83,108,0.4)", "0-15": "RGBA(255,198,191,0.4)", "16-20": "RGBA(170,214,136,0.4)", "21-25": "RGBA(152,195,119,0.6)", "26-30": "RGBA(139,189,120,0.9)", "31+": "RGBA(94,167,88,0.9)", }; for (const cell of document.getElementsByTagName("td")){ if (cell.innerHTML == "-"){ cell.style.backgroundColor = colourMap["-"]; }else{ for (const range of Object.keys(colourMap)) if (range != "-" && (/^[0-9]+\+$/g.test(range) && Number(cell.innerHTML) >= Number(range.slice(0, -1))) || (Number(range.split("-")[0]) <= Number(cell.innerHTML) && Number(range.split("-")[1]) >= Number(cell.innerHTML))) cell.style.backgroundColor = colourMap[range]; } }
<!DOCTYPE html> <html lang="en"> <head> <title>DATA FRAME TABLE</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <table id="status_report" border="1" class="table table-hover" data-vertable="ver1"> <tbody style="text-align: center;"> <tr> <td>Name</td> <td>Round 1</td> <td>Round 2</td> <td>Round 3</td> <td>Round 4</td> <td>Avg</td> </tr> <tr> <td>Ben</td> <td>19</td> <td>24</td> <td>22</td> <td>27</td> <td>23.0</td> </tr> <tr> <td>Harry</td> <td>21</td> <td>19</td> <td>15</td> <td>19</td> <td>18.5</td> </tr> <tr> <td>Tom</td> <td>10</td> <td>22</td> <td>18</td> <td>21</td> <td>17.8</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>19</td> <td>16</td> <td>17</td> <td>17.5</td> </tr> <tr> <td>Angus</td> <td>13</td> <td>-</td> <td>21</td> <td>19</td> <td>17.2</td> </tr> </tbody> </table> </body> </html>
solution2
1 ACCPTED 2022-05-23 10:31:41
i think you can setup condition in js like this.
$(document).ready(function(){ $('#status_report tr td').each(function(){ if ($(this).text() == '-') { $(this).css('background-color','RGBA(85,83,108,0.4)'); }else if ($(this).text() >=0 && $(this).text() <=15) { $(this).css('background-color','RGBA(255,198,191,0.4)'); }else if ($(this).text() > 15 && $(this).text() <=20) { $(this).css('background-color','RGBA(170,214,136,0.4)'); }else if ($(this).text() > 20 && $(this).text() <=25) { $(this).css('background-color','RGBA(152,195,119,0.6)'); }else if ($(this).text() > 25 && $(this).text() <=30) { $(this).css('background-color','RGBA(139,189,120,0.9)'); }else if ($(this).text() > 30) { $(this).css('background-color','RGBA(94,167,88,0.9)'); } }); });
<!DOCTYPE html> <html lang="en"> <head> <title>DATA FRAME TABLE</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <table id="status_report" border="1" class="table table-hover" data-vertable="ver1"> <tbody style="text-align: center;"> <tr> <td>Name</td> <td>Round 1</td> <td>Round 2</td> <td>Round 3</td> <td>Round 4</td> <td>Avg</td> </tr> <tr> <td>Ben</td> <td>19</td> <td>24</td> <td>22</td> <td>27</td> <td>23.0</td> </tr> <tr> <td>Harry</td> <td>21</td> <td>19</td> <td>15</td> <td>19</td> <td>18.5</td> </tr> <tr> <td>Tom</td> <td>10</td> <td>22</td> <td>18</td> <td>21</td> <td>17.8</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>19</td> <td>16</td> <td>17</td> <td>17.5</td> </tr> <tr> <td>Angus</td> <td>13</td> <td>-</td> <td>21</td> <td>19</td> <td>17.2</td> </tr> </tbody> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML table change cell color
Html table cell value
Lightswitch HTML Client 2013 - Change Cell Color Depending Upon Cell Value in table
Conditional popup text, onmouseover depending of the value in cell of a table. Html, javascript and css
Cannot change color in cell of table in html
How to change color of a cell of table in html
Print table cell background color having conditional formatting
HTML table cell value counter
Assign a value to cell in a HTML table
select html table cell based on cell value
Related Tags