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

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 2

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 3

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";
}

Answer 4

• .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.