i have a table which is created dynamically from database.

            for (int m = 0; m < table.size(); m++) {

                out.print("<tr>");

                for (int k = 0; k < table.get(0).length; k++)

                {    out.print("<td width='10'>");
                     out.print(table.get(m)[k]);
                     out.println("</td>");
                }
                out.println("</tr>");

            }

I want to make a each cell coloured based on its value , The out put of my table is ;

i have a table which is created dynamically from database.

            for (int m = 0; m < table.size(); m++) {

                out.print("<tr>");

                for (int k = 0; k < table.get(0).length; k++)

                {    out.print("<td width='10'>");
                     out.print(table.get(m)[k]);
                     out.println("</td>");
                }
                out.println("</tr>");

            }

I want to make a each cell coloured based on its value , The out put of my table is ;

• javascript
• jsp
• colors
• cell
• heatmap

• You can run a script just after the table is made, to check for values and update styles (There probably must be a better way though) – ArmaGeddON Commented May 3, 2017 at 17:48
• 1 Do you have any sample ? I couldnt imagine @ArmaGeddON – mstfky Commented May 3, 2017 at 17:50
• You can iterate though all td elements you want to change, check their value and change style accordingly – ArmaGeddON Commented May 3, 2017 at 17:54
• @mstfky Did anyone solve your problem? If so, could you please accept the best answer (click the checkmark under the points). That will help other users that e across your question quickly spot the accepted answer and it also gives 15 rep. points to the author (: – Danziger Commented Jan 31, 2018 at 6:06

1 Answer 1

Use HSL instead of RGB to represent your colors.

You will need something like this:

let table = '<table>';

for (let i = 0; i < 4; ++i) {

  table += '<tr>';

  for(let k = 0; k < 10; ++k) {
    const value = Math.random();
    const h = 240 - value * 240;
    
    table += '<td style="background: hsl(' + h + ', 100%, 50%)">' + value.toFixed(2) + '</td>';
  }

  table += '</tr>';
}

document.write(table);

table {
  border: 1px solid #000;
  border-collapse: collapse;
  font-family: Sans-Serif;
  color: #000;
}

td {
  border: 2px solid #000;
  padding: .5rem;
}

Ideally, add the style attributes in your backend so that the page that you send to the client already has the colors. If for any reason you can't do that, then just go over the cells in the client, reading their values and adding them the appropriated background color.

Using the other ponents of HSL you could generate different colors schemas. For example, a single-hue scale, with black and white on its ends and a colors of your choice in the middle, blue in this case:

let table = '<table>';

for (let i = 0; i < 4; ++i) {

  table += '<tr>';

  for(let k = 0; k < 10; ++k) {
    const value = Math.random();
    const l = value * 100;
    const textColor = l < 35 ? '#FFF' : '#000';
    
    table += '<td style="background: hsl(200, 100%, ' + l + '%); color: ' + textColor + '">' + value.toFixed(2) + '</td>';
  }

  table += '</tr>';
}

document.write(table);

table {
  border: 1px solid #000;
  border-collapse: collapse;
  font-family: Sans-Serif;
  color: #000;
}

td {
  border: 2px solid #000;
  padding: .5rem;
}