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

user_10470463 0
Viewed 34

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>
html-table html javascript
2 Answers

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>
user_66660730

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>

user_148071110
Related