Question

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

Answer 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;
}

Answer 2

不幸的是，基于使用该属性选择器悬停在一行上，无法通过CSS本地突出显示其他行。你需要涉及某种类型的javascript才能这样做。

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

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

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

悬停突出显示一组行中的效果

2 个答案: