Un-Change color of table cell after radio button click

I have a table with a radio button in the very first cell of each row.

Everytime I click on the button the color of the row should change - which it does. But what I want to a开发者_C百科chieve is that every time I click another radio button, the color of the table cell of the first one should go back to normal - so just the cell is highlighted where the button is clicked.

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

This gives the cell the color. How can I "un-color" it? Thanks!

---

The easiest would be to add a "selected" CSS class to the row you want selected:

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

Here's a sample of it in action: http://jsfiddle.net/LNBPq/ Is that more or less what you want to achieve?

---

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