Hover highlight effect in a group of rows

Question

I have quite a big table grouped by a data attribute which looks like this:

<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>

I don't know in advance the value of the possible groups (could be more than 50 groups). They are generated dynamically.

Right now I am using jQuery to create the hover highlight effect but is a bit slow. I was wondering if there's any way to do it with CSS.

This is what I'm using right now:

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

Working demo: http://jsfiddle.net/MW69S/

Answer 1

Forked a working demo for you. You can achieve this (as long as the rows are always grouped) with multiple tbody elements.

<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>

You can then use the altered CSS rule:

tbody:hover{
    background:#ff00ff;
}

Answer 2

Unfortunately, there's no way to highlight other rows natively through CSS based on hovering over one row with that attribute selector. You would need to involve some sort of javascript in order to do so.

However, I would recommend increasing the performance of your existing jQuery by changing the call to something like this:

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

That should speed up the whole process, as you're increasing specificity of the selector, thus giving jQuery less to dig through in order to find the elements which you're looking for.