'Change the background colour of a table cell if the content is not the same as another cell

I have an output.php. It creates an html table with 3 columns: Question number, Correct Answer, Student Answer. Works just as I want it to.

Now what I would like is to paint the cells with incorrect student answers red. I think Javascript is the best way to do this, rather than php.

Looking at other answers here, I was hoping this might do the job, but, alas ...

Can you please help me get this working?

<script type="text/javascript" >
function paint_cells() {
    var tds = document.querySelectorAll('tbody td'), i;
    for(i = 0; i < tds.length; i += 3) {
      if(tds[i+1].textContent != tds[i+2].textContent){
        tds[i+2].bgColor = "red";
      }
    }
</script>
javascripthtmlhtml-table


Solution 1:[1]

You code working good! I think your problem occurs that your js run before the dom already loaded. You have multiple opportunities to fix this. 1) you can add your script to the bottom inside the body tag. 2) work with onload event. https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onload

Note Maybe you forgot to call the function? paint_cells()

function paint_cells() {
  var tds = document.querySelectorAll('tbody td'), i;
  for(i = 0; i < tds.length; i += 3) {
    if(tds[i+1].textContent != tds[i+2].textContent){
      tds[i+2].bgColor = "red";
    }
  }
}

paint_cells();
  
<table border="1">
  <thead>
    <tr>
      <th>Question</th>
      <th>Correct Answer</th>
      <th>Students Answer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc</td>
      <td>right</td>
      <td>false</td>      
    </tr>
    <tr>
      <td>abc</td>
      <td>right</td>
      <td>right</td>                 
    </tr> 
    <tr>
      <td>abc</td>
      <td>right</td>
      <td>false</td>                 
    </tr>     
  </tbody>
</table>

Solution 2:[2]

I think you need to wait for page DOM loaded, try below. And it also depends on how and when the table in your page is generated, if it doesn't work, please provide more details.

<script type="text/javascript" >
    
    window.addEventListener('DOMContentLoaded', (event) => {
        var tds = document.querySelectorAll('tbody td'), i;
        for(i = 0; i < tds.length; i += 3) {
          if(tds[i+1].textContent != tds[i+2].textContent){
            tds[i+2].bgColor = "red";
          }
        }
    });
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maik Lowrey
Solution 2

Related Questions