Jquery 在一组行中悬停高亮显示效果

我有一个相当大的表，它由

data

属性分组，如下所示：

<table>
    <tr data-group="666"><td></td></tr>
    <tr data-group="666"><td></td></tr>

    <tr data-group="2"><td></td></tr>
    <tr data-group="2"><td></td></tr>

    <tr data-group="XXXX"><td></td></tr>
    <tr data-group="XXXX"><td></td></tr>
</table>

$('tr[data-group]').on('hover', function() {
  var t = $(this);
  t.siblings('[data-group='+t.attr('data-group')+']').toggleClass('hover');
});

---

正在工作的演示：

不幸的是，如果使用该属性选择器将鼠标悬停在一行上，就无法通过CSS本机高亮显示其他行。要做到这一点，您需要使用某种javascript

但是，我建议通过将调用更改为以下内容来提高现有jQuery的性能：

<table>
    <tr data-group="666"><td></td></tr>
    <tr data-group="666"><td></td></tr>

    <tr data-group="2"><td></td></tr>
    <tr data-group="2"><td></td></tr>

    <tr data-group="XXXX"><td></td></tr>
    <tr data-group="XXXX"><td></td></tr>
</table>

$('tr[data-group]').on('hover', function() {
  var t = $(this);
  t.siblings('[data-group='+t.attr('data-group')+']').toggleClass('hover');
});

这将加快整个过程，因为您增加了选择器的特殊性，从而减少了jQuery在查找所需元素时需要挖掘的时间。

。您可以使用多个

tbody

元素来实现这一点（只要行始终分组）

<table>
    <tbody data-group="666">
        <tr><td>aaaa</td></tr>
        <tr><td>bbbbb</td></tr>
    </tbody>
    <tbody data-group="2">
        <tr><td>aaaa</td></tr>
        <tr><td>bbbb</td></tr>
    </tbody>
    <tbody data-group="XXXX">
        <tr><td>aaaa</td></tr>
        <tr><td>bbbb</td></tr>
    </tbody>
</table>

---

你的html正确吗？您没有使用

数据传输

这可能很有用：@Archer。工作演示添加。（使用小表格）

.live

已被弃用。如果您使用的jQuery版本超过1.6，一个性能建议是使用.on（）；并将事件附加到表ID:$（'#tableId'）。on（'hover'，'tr'，function（）{}）；使用.live（）它在执行live之前获取所有元素，还通过指定tableId而不是document（使用.live）获取更短的路径。对不起，看来已经有人暗示了聪明！我忘了在一个表中有多个

tbody

元素是合法的。不过，可能需要测试它是否能在较旧的浏览器中工作。另一种方法是使用，这会导致一些相当庞大和丑陋的HTML。这是完全合法的，如果行已经分组，这是一个很好的答案。W3C规范实际上需要不止一个tbody，这可以在DTD中找到：我不希望向生成的HTML表中添加更多代码，因为可能有很多行，而且我还在基于当前结构应用其他jQuery事件。无论如何谢谢你。@Joshburges我必须检查一下它是否合法。老实说，它在语义上是不明确的。多个身体？它到底代表了什么？但是，是的，它可以工作，而且不需要脚本。以后一定要记住…Tbody是colgroup的行等价物，它允许您以语义方式将相关行分组在一起。在数据组中需要引号，在

之前需要一个引号。toggleClass

。感谢jQuery性能提示。测试其改进并不简单，但看起来更好。我将应用它。