如果内容与另一个单元格不同，则更改 table 单元格的背景颜色

Question

我有一个 output.php。它创建一个包含 3 列的 html table：问题编号、正确答案、学生答案。按照我的意愿工作。

现在我想要的是将学生答案不正确的单元格涂成红色。我认为 Javascript 是最好的方法，而不是 php.

在这里查看其他答案，我希望这可以完成工作，但是，唉......

你能帮我解决这个问题吗？

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

Answer 1

我认为您需要等待页面 DOM 加载完毕，请尝试以下操作。而且这还取决于您页面中的 table 是如何以及何时生成的，如果它不起作用，请提供更多详细信息。

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

Answer 2

您的代码运行良好！我认为您的问题发生在 dom 之前的 js 运行已经加载。你有很多机会来解决这个问题。 1）您可以将脚本添加到 body 标签内的底部。 2) 使用 onload 事件。 https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onload

注意可能是你忘记调用函数了？ 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>

如果内容与另一个单元格不同，则更改 table 单元格的背景颜色

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

javascript

html

html-table