Conditional formatting html table with javascript

Question

Using only javascript (not jquery, etc) set background-color for html table row based on the value of a cell value in table column. If value in 'Results' column equals 'Success' then row is 'green' if value is 'Fail' then row is 'red'.

Background: -modifying python code that generates html with table, already added 'sort on click' function -tried several options for conditionally formatting, none successfully -true newbie, so dropping all sample code -focus on function resultFormatting at end of code

function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.getElementsByTagName("TR"); for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } function resultFormatting() { ('tr').each(function() { var col_val = $(this).find('td.eq(4)').text(); if (col_val == "Success") { $(this).addClass('selected'); } else { $(this).addClass('bad'); } }); }); .selected { background-color: green; } .bad { background-color: red; }

td { width: 200px; height: 60px; } th { cursor: pointer; }

<body> <p style="font-size:30px"> Total tests: 10. Failed tests: 2. Skipped tests: 0.<br> </p> <p style="font-size:30px"> Report test time 0:00:00<br> </p> <table border="1" id="myTable"> <thead> <tr> <th onclick="sortTable(0)">Facility</th> <th onclick="sortTable(1)">Test_group</th> <th onclick="sortTable(2)">Test_number</th> <th onclick="sortTable(3)">Description</th> <th onclick="sortTable(4)">Result</th> <th onclick="sortTable(5)">Execution_time</th> <th onclick="sortTable(6)">Information</th> <th onclick="sortTable(7)">Output</th> </tr> </thead> <tbody> <tr> <td>Room</td> <td>468</td> <td>0</td> <td>Horse</td> <td>Success</td> <td>0:14:39</td> <td>Brown</td> <td></td> </tr> <tr> <td>Den</td> <td>288</td> <td>1</td> <td>Mule</td> <td>Success</td> <td>0:00:21</td> <td>Brown</td> <td></td> </tr> <tr> <td>Den</td> <td>660</td> <td>2</td> <td>Horse</td> <td>Success</td> <td>0:05:47</td> <td>Brown</td> <td></td> </tr> <tr> <td>Patio</td> <td>148</td> <td>3</td> <td>Pig</td> <td>Fail</td> <td>0:14:34</td> <td>Red</td> <td></td> </tr> <tr> <td>Patio</td> <td>386</td> <td>4</td> <td>Horse</td> <td>Fail</td> <td>0:13:07</td> <td>Brown</td> <td></td> </tr> <tr> <td>Room</td> <td>238</td> <td>5</td> <td>Pig</td> <td>Success</td> <td>0:13:17</td> <td>Brown</td> <td></td> </tr> <tr> <td>Den</td> <td>988</td> <td>6</td> <td>Dog</td> <td>Success</td> <td>0:05:13</td> <td>Red</td> <td></td> </tr> <tr> <td>Room</td> <td>256</td> <td>7</td> <td>Mule</td> <td>Success</td> <td>0:05:32</td> <td>Purple</td> <td></td> </tr> <tr> <td>Room</td> <td>973</td> <td>8</td> <td>Pig</td> <td>Success</td> <td>0:00:06</td> <td>Purple</td> <td></td> </tr> <tr> <td>Shower</td> <td>547</td> <td>9</td> <td>Horse</td> <td>Success</td> <td>0:09:26</td> <td>Red</td> <td></td> </tr> </tbody> </table>

What is ('tr').each supposed to be doing if you're not wanting to use a library? Looks like some typo. — Sunny Patel
– Sunny Patel, Commented Jul 30, 2018 at 17:17
If you have python code generating the HTML table, then why not just add the appropriate class to the corresponding <tr> element? — Sunny Patel
– Sunny Patel, Commented Jul 30, 2018 at 17:21
@SunnyPatel - of all the code I researched and tried this snippet seemed the most promising; granted python code would likely be more efficient, however I'd like to find a javascript solution since I was successful at sorting table columns with js only — fjm
– fjm, Commented Jul 30, 2018 at 17:43
Since they're not really related, why not post the same question with your Python code? I'll see about answering both. — Sunny Patel
– Sunny Patel, Commented Jul 30, 2018 at 17:54

Sunny Patel · Accepted Answer · 2018-08-01 15:27:08Z

For a pure JS solution to this (negating the fact that you had tried to implement a jQuery solution), just use the following:

function resultFormatting() { var rows = document.getElementById("myTable").getElementsByTagName('tr'); for (var i = 0; i < rows[0].children.length && rows[0].children[i].innerHTML !== "Result"; i++); for (var j = 1; j < rows.length; j++) { rows[j].classList.add(rows[j].children[i].innerHTML === "Success" ? 'selected' : 'bad'); } };

This gets all the rows in your myTable. Searches the first heading row for "Result", incase you wanted to reorder the columns and saves that index to i.

Then the code goes through the remaining rows to add one of the two classes you had partially implemented for the rows based on the value of the i'th column's value.

Here's the full snippet:

function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.getElementsByTagName("TR"); for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } function resultFormatting() { var rows = document.getElementById("myTable").getElementsByTagName('tr'); for (var i = 0; i < rows[0].children.length && rows[0].children[i].innerHTML !== "Result"; i++); for (var j = 1; j < rows.length; j++) { rows[j].classList.add(rows[j].children[i].innerHTML === "Success" ? 'selected' : 'bad'); } }; resultFormatting();

td { width: 200px; height: 60px; } th { cursor: pointer; } .selected { background-color: green; } .bad { background-color: red; }

<body> <p style="font-size:30px"> Total tests: 10. Failed tests: 2. Skipped tests: 0.<br> </p> <p style="font-size:30px"> Report test time 0:00:00<br> </p> <table border="1" id="myTable"> <thead> <tr> <th onclick="sortTable(0)">Facility</th> <th onclick="sortTable(1)">Test_group</th> <th onclick="sortTable(2)">Test_number</th> <th onclick="sortTable(3)">Description</th> <th onclick="sortTable(4)">Result</th> <th onclick="sortTable(5)">Execution_time</th> <th onclick="sortTable(6)">Information</th> <th onclick="sortTable(7)">Output</th> </tr> </thead> <tbody> <tr> <td>Room</td> <td>468</td> <td>0</td> <td>Horse</td> <td>Success</td> <td>0:14:39</td> <td>Brown</td> <td></td> </tr> <tr> <td>Den</td> <td>288</td> <td>1</td> <td>Mule</td> <td>Success</td> <td>0:00:21</td> <td>Brown</td> <td></td> </tr> <tr> <td>Den</td> <td>660</td> <td>2</td> <td>Horse</td> <td>Success</td> <td>0:05:47</td> <td>Brown</td> <td></td> </tr> <tr> <td>Patio</td> <td>148</td> <td>3</td> <td>Pig</td> <td>Fail</td> <td>0:14:34</td> <td>Red</td> <td></td> </tr> <tr> <td>Patio</td> <td>386</td> <td>4</td> <td>Horse</td> <td>Fail</td> <td>0:13:07</td> <td>Brown</td> <td></td> </tr> <tr> <td>Room</td> <td>238</td> <td>5</td> <td>Pig</td> <td>Success</td> <td>0:13:17</td> <td>Brown</td> <td></td> </tr> <tr> <td>Den</td> <td>988</td> <td>6</td> <td>Dog</td> <td>Success</td> <td>0:05:13</td> <td>Red</td> <td></td> </tr> <tr> <td>Room</td> <td>256</td> <td>7</td> <td>Mule</td> <td>Success</td> <td>0:05:32</td> <td>Purple</td> <td></td> </tr> <tr> <td>Room</td> <td>973</td> <td>8</td> <td>Pig</td> <td>Success</td> <td>0:00:06</td> <td>Purple</td> <td></td> </tr> <tr> <td>Shower</td> <td>547</td> <td>9</td> <td>Horse</td> <td>Success</td> <td>0:09:26</td> <td>Red</td> <td></td> </tr> </tbody> </table>

wow, not sure how you determined I tried jquery tablesorter, but I did...I've tried several ways to incorporate the code, with no success, I will keep trying, since I believe I follow the flow...
@fjm Again, a python solution is the best. And from your edit, I can tell you right away how to fix it if you write up a question with that info.
Please accept if this worked out for you. You'll just need to execute that function after the table is loaded into the DOM.
ahhh...yes it does....ok, so I'll review all of the code and see what I've done wrong, once I have made whatever needed changes I'll mark as answered, many thanks Sunny

Collectives™ on Stack Overflow

Conditional formatting html table with javascript

1 Answer 1

11 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Linked

Related