2011-03-09 116 views
0

我在每行的第一個單元格中有一個單選按鈕的表格。在單選按鈕單擊後,取消更改表格單元格的顏色

每當我點擊按鈕時,行的顏色應該改變 - 它做的。但是我想要實現的是每當我點擊另一個單選按鈕時,第一個單元格的表格單元格的顏色應該恢復正常 - 所以只需單擊該單元格就會突出顯示單擊該按鈕的位置。

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

這給單元格的顏色。我怎樣才能「取消顏色」呢?謝謝!

+1

你知道你是爲了勾選正確的答案?如果你不這樣做,人們不會熱衷於回答你的問題。這是複雜的獎勵計劃的一部分,使得本網站成爲尋找編程問題答案的最佳場所。 – 2011-03-28 13:09:34

回答

3

最簡單的是添加了「選擇」的CSS類到你想要的行選擇:

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

下面是它在行動的例子:http://jsfiddle.net/LNBPq/是或多或少你想實現什麼?

1

的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

+0

這一個發現每個tr元素,然後應用背景顏色白色,這不是一個好的解決方案。 – rahul 2011-03-09 12:17:25

+0

@rahul:iam只是給基本的他可能會使用一些名爲highlight的類,並做一些像這樣的事情jQuery('#myTable')。find('。highlight')。removeClass('highlight'); – 2011-03-09 12:30:43

+0

我怎樣才能使這項工作只是在每一行的第一個單元? – Denise 2011-03-09 12:43:25