一组行中的悬停高亮效果答案

【问题标题】：Hover highlight effect in a group of rows一组行中的悬停高亮效果
【发布时间】：2013-03-09 00:05:56
【问题描述】：

我有一个很大的表格，按 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>

我事先不知道可能组的值（可能超过 50 个组）。它们是动态生成的。

现在我正在使用 jQuery 来创建悬停高亮效果，但速度有点慢。我想知道是否有任何方法可以使用 CSS。

这是我现在正在使用的：

$('tr').live('hover', function() {
        $('tr[data-group="'+$(this).data('group')+ '"]').toggleClass('hover');
});

工作演示：http://jsfiddle.net/MW69S/

【问题讨论】：

您的 html 是否正确？你还没用过data-transport
这很有用：stackoverflow.com/questions/7510753/trhover-not-working
@Archer。添加了工作演示。（带一张小桌子）
.live 已被弃用。请改用.on。
如果您使用 1.6 以上的 jQuery 版本，一个性能建议是使用 .on()；并将事件附加到表 ID： $('#tableId').on('hover', 'tr', function(){});使用 .live() 它会在执行 live 之前抓取所有元素，同样通过指定 tableId 而不是文档（.live 使用）它需要更短的路径。 抱歉，好像有人已经建议了

标签： jquery css

【解决方案1】：

Forked a working demo for you。您可以使用多个 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>

然后您可以使用更改后的 CSS 规则：

tbody:hover{
    background:#ff00ff;
}

【讨论】：

聪明！我忘记了在一个表中包含多个 tbody 元素是合法的。不过，可能需要测试它是否适用于旧版浏览器。另一种方法是使用nested tables，这会产生一些相当庞大和丑陋的HTML。
这是完全合法的，如果行已经分组，这是一个很好的答案。 W3C 规范实际上需要多个 tbody，可以在 DTD 中找到：
我不想在生成的 HTML 表中添加更多代码，因为可能有很多行，而且我还在基于当前结构应用其他 jQuery 事件。还是谢谢。
@JoshBurgess 我必须检查它是否合法。老实说，它在语义上是模棱两可的。多个身体？它甚至代表什么？但是，是的，它有效，并且消除了对脚本的需求。以后一定要记住……
Tbody 是相当于 colgroup 的行，它允许您以语义方式将相关行组合在一起。 w3.org/TR/html401/struct/tables.html#h-11.2.3

【解决方案2】：

不幸的是，没有办法通过 CSS 以使用该属性选择器将鼠标悬停在一行上来突出显示其他行。为此，您需要使用某种 javascript。

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

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

这应该会加快整个过程，因为您增加了选择器的特异性，从而减少了 jQuery 的挖掘工作，以便找到您正在寻找的元素。

【讨论】：

需要数据组中的引号和).toggleClass之前的单引号。
感谢 jQuery 性能提示。测试它的改进并不简单，但看起来更好。我会应用它。