jquery - OnClick 更改所有同级表行 jQuery

Question

我尝试编写一个 jQuery 语句来将当前单击的表行更改为不同的前景色，同时使所有同级表行具有相同的颜色。基本上使其看起来像单击的行处于事件状态。这是我到目前为止所拥有的，第一次可以工作，但第二次它永远不会将所有 sibling 设置为未选择的颜色。

<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

最好通过类来处理此类内容，而不是使用临时的 CSS 规则。

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

在线演示:http://jsbin.com/ajalu/2/edit

或者您可以基于 TR 本身:

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

在线演示:http://jsbin.com/ajalu/3/edit ​