5

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

4

2 回答 2

8

为您分叉了一个工作演示。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;
}
于 2013-03-08T14:39:36.783 回答
2

不幸的是，没有办法通过 CSS 基于使用该属性选择器将鼠标悬停在一行上来突出显示其他行。您需要使用某种 javascript 才能做到这一点。

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

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

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

于 2013-03-08T14:35:22.373 回答