DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
Examples
Manual
Reference
Extensions
Plug-ins
Blog
Forums
Discussions
Sign In
Support
FAQs
Download
Purchase
≡
Show site navigation
Highlight a single row with CSS?
Highlight a single row with CSS?
coral
Posts: 1
Questions: 0
Answers: 0
April 2009
edited April 2009
in
General
Hello, i read the docs and found "Of course the highlighting of a row is easy enough using CSS".
I wonder how to do this easy enough row highlighting?
Replies
allan
Posts: 64,660
Questions: 1
Answers: 10,691
Site admin
April 2009
Hi coral,
tr:hover {
background-color: blue;
}
should do the trick :-)
You can see this in action here (along with Javascript column highlighting): http://datatables.net/examples/example_highlight.html
Allan
andrewmoreno
Posts: 10
Questions: 0
Answers: 0
May 2010
Allan, it appears that there may be issues with this example and IE 6 (don't you just hate IE???)
The below code highlights rows correctly in Chrome and Firefox, but not IE 6. Any ideas?
[code]
$('#example tbody td').hover( function() {
var iCol = $('td').index(this) % 5;
var nTrs = oTable.fnGetNodes();
$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
}, function() {
var nTrs = oTable.fnGetNodes();
$('td.highlighted', nTrs).removeClass('highlighted');
} );
[/code]
This discussion has been closed.
Sign In
·
Register
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Sign In
Register
Quick Links
Categories
Recent Discussions
Unanswered
Categories
75.1K
All Categories
57
Priority support
24.6K
Free community support
1K
General
14
Announcements
2.6K
DataTables
129
DataTables 2
1.3K
DataTables 1.10
93
DataTables 1.9
35
DataTables 1.8
9
CloudTables
2.3K
Editor
2.8K
Extensions
20
AutoFill
314
Buttons
34
ColReorder
4
ColumnControl
33
DateTime
68
FixedColumns
51
FixedHeader
31
KeyTable
106
Responsive
24
RowReorder
43
Scroller
168
SearchBuilder
200
SearchPanes
107
Select
27
StateRestore
220
Bug reports
68
Feature requests
101
Plug-ins
11
Blog
73
Web-site
Replies
tr:hover {
background-color: blue;
}
should do the trick :-)
You can see this in action here (along with Javascript column highlighting): http://datatables.net/examples/example_highlight.html
Allan
The below code highlights rows correctly in Chrome and Firefox, but not IE 6. Any ideas?
[code]
$('#example tbody td').hover( function() {
var iCol = $('td').index(this) % 5;
var nTrs = oTable.fnGetNodes();
$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
}, function() {
var nTrs = oTable.fnGetNodes();
$('td.highlighted', nTrs).removeClass('highlighted');
} );
[/code]