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, Jul 30 '18 at 17:17
If you have python code generating the HTML table, then why not just add the appropriate class to the corresponding `` element? — Sunny Patel, Jul 30 '18 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, Jul 30 '18 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, Jul 30 '18 at 17:54
@SunnyPatel - I added the python code (sorry could not add as additional snippet tagged as python; i can make new question if that is best. — fjm, Jul 30 '18 at 18:04
Sorry, that's what I meant. Add a new question based on Python. — Sunny Patel, Jul 30 '18 at 18:13

Sunny Patel · Accepted Answer · 2018-08-01T15:27:08.590

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, Jul 30 '18 at 18:32
@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. — Sunny Patel, Jul 30 '18 at 18:37
please see https://stackoverflow.com/questions/51600410/conditional-format-html-table-rows-with-python — fjm, Jul 30 '18 at 18:48
Please accept if this worked out for you. You'll just need to execute that function after the [table is loaded into the DOM](https://stackoverflow.com/questions/11936816/call-a-function-after-complete-page-load). — Sunny Patel, Jul 30 '18 at 19:14
added **document.getElementById("myTable").addEventListener("DOMContentLoaded", resultFormatting);** preceding function, tried several syntax from link provided and other sources, to no avail. — fjm, Jul 31 '18 at 21:17
simple enough, tried and tried, but function does not execute, placed following function between tags and just before
tag; thank you for your assistance — fjm, Aug 01 '18 at 13:53
Sorry, I realized after more testing that there was issues in the code. I've edited and updated my answer. — Sunny Patel, Aug 01 '18 at 15:27
I've edited function as noted and tripled checked that I made the changes, the function is invoked as early described, the CSS .selected & .bad are in place as they were for the Python solution, so I think that part is good, but still no row painting...I will keep trying to understand the function to troubleshoot too. — fjm, Aug 01 '18 at 15:41
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 — fjm, Aug 01 '18 at 15:46
thank you, I finally decided to simply delete and rewrite the function...and then all is good, thank you very much. — fjm, Aug 01 '18 at 17:14

Conditional formatting html table with javascript

1 Answers1