OnClick 更改所有同级表行 jQuery答案

【问题标题】：OnClick change all sibling table rows jQueryOnClick 更改所有同级表行 jQuery
【发布时间】：2011-01-15 00:18:24
【问题描述】：

我正在尝试编写一个 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>

【问题讨论】：

标签： jquery

【解决方案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

【讨论】：

有两点我不喜欢这个。首先，它将类应用于表格元素，而不是行。在我看来，突出显示一行应该是行操作，而不是元素操作。其次，这真的取决于表结构是否统一且非常普通。例如，它不会影响多个 tbody 元素中的行。它也只突出显示所选行中的当前元素。如果该行包含更多元素，则这些元素不会应用该类。
@tvanfosson：我已经更新了解决方案来解决您的问题。谢谢。

【解决方案2】：

我更喜欢通过添加/删除 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>

【讨论】：

【解决方案3】：

不要在你的 html 标记中使用 onclick

如果你在每个 td 上都有一个 id，你可以这样做

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

【讨论】：

这超出了我的问题范围，我会在功能正常工作后对其进行优化。
我用比以前更好的解决方案编辑了我的答案。
仍然是错误的，语法也错误删除和添加类。你不包括'。'
是的，你的权利不需要 .既然你现在两次抓到我的错误，我就要离开自己了