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

残念ながら、その属性セレクターで 1 つの行にカーソルを合わせることに基づいて、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 に答える