Question

I am try to write a jQuery statement to change the table row that is currently clicked to a different foreground color while making all the sibling table rows the same color. Basically making it look like the clicked row is active. Here’s what I have so far, this here works the first time, but on the second time on it never sets all the siblings to the non selected color.

<script type="text/javascript">
    function changeRows(currentRow) {
        $(currentRow).css('color', 'green'); // change clicked row to active color
        $(currentRow).parent().siblings().css('color', 'red'); // change all the rest to non active color
    }
</script>  


<table>
  <tr>
    <td onclick="changeRows(this)">123
    </td>
  </tr>
  <tr>
    <td onclick="changeRows(this)">1234
    </td>
  </tr>
  <tr>
    <td onclick="changeRows(this)">12345
    </td>
  </tr>
  <tr>
    <td onclick="changeRows(this)">123456
    </td>
  </tr>
</table>

Answer 1

It’s best to handle this type of stuff through classes rather than popping in ad-hoc css rules.

$("td").click(function(){
  $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});

Online demo: http://jsbin.com/ajalu/2/edit

Or you can base it on the TR itself:

$("tr").click(function(){
  $(this).addClass("on").siblings("tr").removeClass("on");
});

Online demo: http://jsbin.com/ajalu/3/edit​