OnClick更改所有兄弟表行jQuery

我尝试编写一个jQuery语句，以更改当前单击为不同的前景色，同时使所有兄弟表行成为相同颜色的表行。基本上使它看起来像点击行是活跃的。这是迄今为止我所知道的，这是第一次，但第二次在它上面从来没有将所有的兄弟姐妹都设置为非选择的颜色。OnClick更改所有兄弟表行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>

来源

2010-02-09 Gabe

最好是通过类来处理这种类型的东西，而不是弹出ad-hoc css规则。

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

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

或者你也可以基于它的TR本身：在你的HTML标记使用http://jsbin.com/ajalu/3/edit

来源

2010-02-09 21:20:28 Sampson

有两件事我不喜欢这件事。首先，它将类应用于表格元素，而不是行。在我看来，突出显示一行应该是一个行操作，而不是元素操作。其次，这实际上取决于桌子的结构是否统一和漂亮的香草。例如，它不会影响多个tbody元素中的行。它也仅突出显示所选行中的当前元素。如果该行包含更多元素，则这些元素不会应用该类。 – tvanfosson 2010-02-09 21:37:20

@tvanfosson：我已更新解决方案来解决您的问题。谢谢。 – Sampson 2010-02-09 22:03:07

-1

而是采用的onclick：

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

在线演示

如果你有每个td的哟哟你可以做

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

来源

2010-02-09 21:21:01 Catfish

这超出了我的问题的范围，我将在功能正常工作后对其进行优化。 – Gabe 2010-02-09 21:22:37

我用比以前更好的解决方案编辑了我的答案。 – Catfish 2010-02-09 21:25:39

仍然错误，语法也是不正确的删除和添加类。你不包括'。' – Gabe 2010-02-09 21:30:31

我宁愿这样做通过添加/删除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>

来源

2010-02-09 21:23:39 tvanfosson

OnClick更改所有兄弟表行jQuery

回答

相关问题