在单选按钮单击后，取消更改表格单元格的颜色

Question

我在每行的第一个单元格中有一个单选按钮的表格。

每当我点击按钮时，行的颜色应该改变 - 它做的。但是我想要实现的是每当我点击另一个单选按钮时，第一个单元格的表格单元格的颜色应该恢复正常 - 所以只需单击该单元格就会突出显示单击该按钮的位置。

$(".button-class").click(function(){ 
     $(this).closest("tr").find("td:first").css({"background-color":"#f00"});   
    }); 

这给单元格的颜色。我怎样才能“取消颜色”呢？谢谢！

Answer 1

最简单的是添加了“选择”的CSS类到你想要的行选择：

$(".button-class").click(function(){ 
    $(".selected-class").removeClass("selected-class"); 
    $(this).closest("tr").find("td:first").addClass("selected-class"); 
}); 

下面是它在行动的例子：http://jsfiddle.net/LNBPq/是或多或少你想实现什么？

Answer 2

的Html

<table id="myTable"> 
<tr> 
<td> 
    <input name="myRadio" class="myRadio" type="radio" /> 
</td> 
<td> 
    my row 1 
    </td> 
</tr> 
<tr> 
<td> 
    <input name="myRadio" class="myRadio" type="radio" /> 
</td> 
<td> 
    my row 2 
    </td> 
</tr> 
</table> 

的Javascript

jQuery('.myRadio').bind('change',function(e){ 
     jQuery('#myTable').find('tr').css('background-color','#fff'); 
    jQuery(e.target).parents('tr:first').css('background-color','yellow'); 
}); 

Demo