Change td background colour based on the value

Question

I am using google table charts,value where the data is like :

<tr class="google-visualization-table-tr-even">
  <td class="google-visualization-table-td">TC-206</td>
  <td class="google-visualization-table-td">Customer logs in</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Pass</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Pass</td>
</tr>

<tr class="google-visualization-table-tr-odd">
  <td class="google-visualization-table-td">TC-207</td>
  <td class="google-visualization-table-td">Customer signs out</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Pass</td>
  <td class="google-visualization-table-td">Pass</td>
</tr>

So the table value keeps on incrementing, that means, tr and td keeps increasing based on test executions and number of testcases.

So What I like to make a change is if the td value is Pass, the background colour should be green and if its fail, it should be red.

i tried like

var table1 = document.getElementsByClassName('google-visualization-table-td');
var key = table1.value;

for (key in table1) {
  if(key != "Pass"){
    key.bgColor='#800000';
  } 
}; 

But no luck !!

How its possible. Please help.

Answer 1

You are not using the right for loop.
Take a look at this documentation (MDN).

Also, using element.value will return the value of the attribute value, not the text content.

The following code should do the trick.

var elements = document.getElementsByClassName('google-visualization-table-td');

for (var i = 0; i < elements.length; i++) {
  var value = elements[i].innerText || elements[i].textContent;
  
  if (value === 'Fail') {
    elements[i].style.backgroundColor = '#FF0000';
  } else if (value === 'Pass') {
    elements[i].style.backgroundColor = '#00FF00';
  }
}

td {
  display: block;
  border: solid 1px #CCC;
}

<table>
  <tr class="google-visualization-table-tr-even">
    <td class="google-visualization-table-td">TC-206</td>
    <td class="google-visualization-table-td">Customer logs in</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
  </tr>

  <tr class="google-visualization-table-tr-odd">
    <td class="google-visualization-table-td">TC-207</td>
    <td class="google-visualization-table-td">Customer signs out</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
    <td class="google-visualization-table-td">Pass</td>
  </tr>
</table>

Answer 2

• .forEach your HTMLTable.rows
• .forEach your HTMLRow.cells
• Get each cell content cell.textContent.trim().toLowerCase()
• If the content is either pass|fail add a is-[pass|fail] classname

[...document.getElementById("google-visualization").rows].forEach( row =>
  [...row.cells].forEach( cell => {
       const cont = cell.textContent.trim().toLowerCase();
       if (/^(pass|fail)$/.test(cont)) {
          cell.classList.add(`is-${cont}`);
       }
  })
);

.is-pass{background: green;}
.is-fail{background: red;}

<table id="google-visualization">
  <tr class="google-visualization-table-tr-even">
    <td class="google-visualization-table-td">TC-206</td>
    <td class="google-visualization-table-td">Customer logs in</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
  </tr>
  <tr class="google-visualization-table-tr-odd">
    <td class="google-visualization-table-td">TC-207</td>
    <td class="google-visualization-table-td">Customer signs out</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
    <td class="google-visualization-table-td">Pass</td>
  </tr>
</table>

Clearly the best way would be to assign a class fail or pass at elements creation and style using CSS, instead of using JS loops.

Answer 3

So as a caveat to doing it via the javascript way, you're already adding a style tag to each cell that will re-eval and paint each independently as you're say for example adding new rows etc that would also involve firing off that method each time.

Another option to consider is a css selector that doesn't need to be refired, and will handle the issue while not adding a new style tag to each cell which becomes something like an added attribute of data-whatever="<value>" vs style="background-color: <colorThatWillBeConvertedToRGBAutomatically>" to each cell.

So just a no js option;

// Nope.

[data-tag=Pass] {
  background-color: green;
}

[data-tag=Fail] {
  background-color: red;
}

<table>
  <tr class="google-visualization-table-tr-even">
  <td class="google-visualization-table-td" data-tag="TC-206">TC-206</td>
  <td class="google-visualization-table-td" data-tag="Customer logs in">Customer logs in</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Pass">Pass</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>

  <tr class="google-visualization-table-tr-odd">
  <td class="google-visualization-table-td" data-tag="TC-207">TC-207</td>
  <td class="google-visualization-table-td" data-tag="Customer signs out">Customer signs out</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Pass">Pass</td>
  <td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>
</table>

Answer 4

You can add a listener if user can add or remove items in the table or if yourself manage table you can just add this code to your managing functions like adding or removing:-

var x = document.getElementsByClassName("google-visualization-table-td");
for (i = 0; i < x.length; i++) {
    if(x[i].innerText === 'Pass')
        x[i].style.backgroundColor = "green";
    else if(x[i].innerText === 'Fail')
        x[i].style.backgroundColor = "red";
}