Question

我正在创建一个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>");
}

我也尝试过使用onblur而不是onchange，但结果却相同。

Javascript功能：

function changeColour(z) {
  z.style.backgroundColor = "#FFFFFF";
}

function restoreColour(y) {
  y.style.backgroundColor = "#00FF00";
}

在我尝试之前：

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');
});

对于它们中的每一个（除了最后一个），颜色确实变为白色，但是，当用户点击任何其他行时，前一行不会返回绿色。我不介意这是否适用于Javascript或JQuery，只要它兼容浏览器。即使是一个奇特的CSS技巧，我也可以使用它。

Answer 1

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

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

请参阅演示here

Answer 2

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

<强>的jQuery

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

<强> CSS

.active { background-color: yellow; }

See jsFiddle

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

2 个答案: