OnClick更改所有同级表行jQuery [英] OnClick change all sibling table rows jQuery

问题描述

我尝试编写一个jQuery语句，以将当前单击的表行更改为其他前景色，同时使所有同级表行都具有相同的颜色.基本上使它看起来像单击的行是活动的.到目前为止，这是我第一次使用，但是在第二次使用时，从未将所有兄弟姐妹设置为未选择的颜色.

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>

推荐答案

最好通过类处理此类内容，而不是弹出临时CSS规则.

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");
});

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

或者您可以基于TR本身:

Or you can base it on the TR itself:

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

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

这篇关于OnClick更改所有同级表行jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！