如何在单击时更改表行颜色并返回到另一行单击时的原始行颜色？

Question

正如标题所解释的那样，我希望在单击时更改行的颜色，然后在单击另一行时还原颜色，但仍然会更改新单击行的颜色。

JQuery中的解决方案将非常受欢迎。 我只是无法破解这个。 到目前为止，我有什么，但它不适合我。

function loadjob(jobIDincoming, currentID){
$("#joblistingDetail").load('jobview.php' , {jobID: jobIDincoming}).hide().fadeIn('100');
var last = new Array();
last.push(currentID);
$(last[last.length-1]).closest('tr').css('background-color', 'white');
$(currentID).closest('tr').css('background-color', 'red');};

Answer 1

无需复杂化。 这很简单。

$("table tr").click(function() {
   $("table tr").css("background", "#fff"); //reset to original color
   $(this).css("background", "#fo0"); //apply the new color
});

Answer 2

你还没有表现出这样的结果

$(document).delegate("tr","click",function(e){
  $("tr").css('background-color', 'white');
  $(this).css('background-color', 'red');
});

DEMO

Answer 3

我会用

$(document).on('click', 'tr', function(e){
    // reset rows
    $('tr').css('background-color', 'white');
    // set colour of row raising the click event 
    $(this).css('background-color', 'red');
});

另外我会用$ .on作为它的酷...阅读它为什么！

Answer 4

你可以使用一个类，如下所示：

.selected td { background-color: #CCC; }

然后在使用.delegate()单击时应用它，如下所示：

$("#tab1").delegate("tr", "click", function() {
   $(this).addClass("selected").siblings().removeClass("selected");
});

http://jsfiddle.net/nick_craver/Ymd65/