Geek Answers Handbook

The effect of highlighting hover in a row group

I have a fairly large table grouped by the 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 do not know the meaning of possible groups in advance (there may be more than 50 groups). They are generated dynamically.

Right now I'm using jQuery to create a cursor highlight effect, but a bit slow. I was wondering if there is a way to do this using CSS.

Here is what I am using now:

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

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

+4
source share
2 answers

Unfortunately, there is no way to select other lines initially through CSS, based on hovering over the same line with this attribute selector. For this you need some kind of javascript.

However, I would recommend improving 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'); });

This should speed up the whole process, as you increase the specificity of the selector, thereby giving jQuery less opportunity to break through to find the elements you need.

+1
source

I created a working demo for you . You can achieve this (as long as the lines are always grouped) with several 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>

Then you can use the modified CSS rule:

 tbody:hover{ background:#ff00ff; }
+8
source

More articles:


All Articles