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

【问题标题】：Un-Change color of table cell after radio button click单击单选按钮后取消更改表格单元格的颜色
【发布时间】：2011-03-09 12:03:14
【问题描述】：

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

每次我单击按钮时，行的颜色都应该改变 - 它确实如此。但我想要实现的是，每次单击另一个单选按钮时，第一个单选按钮的表格单元格的颜色应该恢复正常 - 因此只有在单击按钮的位置突出显示单元格。

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

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

【问题讨论】：

你知道你要勾选正确的答案吗？如果你不这样做，人们就不会那么热衷于回答你的问题。这都是复杂奖励计划的一部分，使该网站成为寻找编程问题答案的最佳场所。

标签： jquery

【解决方案1】：

最简单的方法是将“选定”的 CSS 类添加到您要选择的行：

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

下面是它的示例：http://jsfiddle.net/LNBPq/ 这或多或少是您想要实现的目标吗？

【讨论】：

【解决方案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

【讨论】：

这个找到每个tr元素，然后应用背景颜色白色，这不是一个好的解决方案。
@rahul：我只是给出基本的，他可能会使用一些名为 highlight 的类，并做一些像这样的事情 jQuery('#myTable').find('.highlight').removeClass('highlight ');
我怎样才能使这项工作只适用于每行中的第一个单元格？