Javascript 更改php生成的动态表中td的颜色

我正在创建一个PHP脚本，它将为一个表动态生成tr和td元素。当用户单击第一列中的特定单元格时，将执行一个AJAX函数来显示其他内容。这是工作，因为它应该，然而，我有什么应该是简单的造型问题。当用户单击一个给定的单元格时，我希望该行改变颜色（工作），直到他们单击另一个单元格（不工作）

因为我的PHP文件相当大，所以我只发布相关部分

<?php
 $myFiles = showMyAttrs();
 foreach($myFiles as $myFile) {
echo("<tr class = 'gradeC' onClick = 'changeColour(this)' onchange = 'restoreColour(this)' >");
echo("<td onClick = 'sendCell(this)' ><img src = $msEx /></td>");
echo("<td>$myFile</td>");
echo("</tr>");
}

在我尝试之前：

function changeColour(z) {
  document.getElementsByTagName("tr").style.backgroundColor = "#00FF00";
  z.style.backgroundColor = "#FFFFFF";
  <!-- document.getElementsByTagName("td").style.backgroundColor = "#00FF00"; -->
}

function changeColour(z) {
  z.style.backgroundColor = "#FFFFFF";
  document.getElementsByTagName("tr").style.backgroundColor = "#00FF00";
}

$('tr').click(function() {
  $('tr').css('backgroundColor', '#0F0');
  $(this).css('backgroundColor', '#FFF');
});

功能更改颜色（z）{
document.getElementsByTagName（“tr”）.style.backgroundColor=“#00FF00”；
z、 style.backgroundColor=“#FFFFFF”；
}
功能更改颜色（z）{
z、 style.backgroundColor=“#FFFFFF”；
document.getElementsByTagName（“tr”）.style.backgroundColor=“#00FF00”；
}
$（'tr'）。单击（函数（）{
$（'tr'）.css（'backgroundColor'，'#0F0'）；
$（this.css（'backgroundColor'，'#FFF'）；
});

---

对于每一行（最后一行除外），颜色都会变为白色，但是，当用户单击任何其他行时，前一行不会返回绿色。我不介意这是否适用于Javascript或JQuery，只要它能够跨浏览器兼容。即使是一个花哨的CSS技巧，我也可以使用

尝试使用css类指定背景颜色：

$('.gradeC td').on('click',function(e){
   if(!$(this).closest('tr').hasClass('green')){ 
      $(this).closest('tr').addClass('green');
    }else{
     $(this).closest('tr').removeClass('green');   
    }
});

---

请参见演示

您走上了正确的轨道。我认为添加/删除类将是一个很好的方法。你可以试试这个：

jQuery

$('tr').on('click', function() {
  $('tr').children('td').removeClass('active');
  $(this).children('td').addClass('active');
});

CSS

.active { background-color: yellow; }

---

+1因为这是一个问得很好的问题。

.active { background-color: yellow; }