Question

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

<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

最好通过类处理这种类型的东西，而不是弹出ad-hoc 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

Answer 2

我更喜欢通过添加/删除CSS类而不是直接设置CSS来实现这一点。我认为你的问题是你在列元素上设置css而不是在行本身上设置css。你可能想尝试类似的东西：

<script type="text/javascript"> 
    function changeRows(currentElem) {
        var $currentElem = $(currentElem);
        var $currentRow = $currentElem.closest('tr');
        var $table = $currentElem.closest('table');
        $table.find('tr').removeClass('highlight');
        $currentRow.addClass('highlight');
    } 
</script>

Answer 3

而不是在html标记中使用onclick

如果你在每个td上都有一个你可以做的身份

$('#td1').click(function() {
   $('td').removeClass('.colored'); 
   $(this).addClass('.colored'); // change clicked row to active color    
});

OnClick更改所有兄弟表行jQuery

3 个答案: