Highlighting Entire Row on Hover with Fixed Columns
Highlighting Entire Row on Hover with Fixed Columns
tcbeaton
Posts: 16Questions: 0Answers: 0
I have a table with fixed columns, I've set up CSS styles to highlight the rows on hover, but only the fixed columns highlight when I hover over them or the non-fixed columns when I hover over them.
Is it possible to have the entire row (fixed and non-fixed columns) highlight when I hover on any cell in the row?
Thanks.
Here's the CSS I'm using to highlight the rows (only "even" included for example):
[code]
tr.even:hover td,
#mtTable tr.even:hover td,
#mtTable tr.even:hover td.sorting_1 { background-color: #FFFF88;
border-top: 2px solid #FF0000;
border-bottom: 2px solid #FF0000; }
[/code]
The first line, "tr.even:hover td", provides the highlighting for the fixed columns, the other two, beginning with "#mtTable", provide the highlighting for the non-fixed columns.
Is it possible to have the entire row (fixed and non-fixed columns) highlight when I hover on any cell in the row?
Thanks.
Here's the CSS I'm using to highlight the rows (only "even" included for example):
[code]
tr.even:hover td,
#mtTable tr.even:hover td,
#mtTable tr.even:hover td.sorting_1 { background-color: #FFFF88;
border-top: 2px solid #FF0000;
border-bottom: 2px solid #FF0000; }
[/code]
The first line, "tr.even:hover td", provides the highlighting for the fixed columns, the other two, beginning with "#mtTable", provide the highlighting for the non-fixed columns.
This discussion has been closed.
Replies
Allan
$(document).on({
mouseenter: function () {
trIndex = $(this).index()+1;
$("table.dataTable").each(function(index) {
$(this).find("tr:eq("+trIndex+")").addClass("hover")
});
},
mouseleave: function () {
trIndex = $(this).index()+1;
$("table.dataTable").each(function(index) {
$(this).find("tr:eq("+trIndex+")").removeClass("hover")
});
}
}, ".dataTables_wrapper tr");
[/code]
I had a bash at writing some code to do this. I am not sure if it is the most efficient way of doing it, all I know is that it works for me. Hope it helps.
To use it you just need to include a hover class in your CSS to do define how you want the tr to display.
Allan
This worked perfectly... I just added an extra level to apply the class to the tag, since I was using cell specific styling (i.e., borders):
[code]
$(document).on({
mouseenter: function () {
trIndex = $(this).index()+1;
$("table.dataTable").each(function(index) {
$(this).find("tr:eq("+trIndex+")").each(function(index) {
$(this).find("td").addClass("hover");
});
});
},
mouseleave: function () {
trIndex = $(this).index()+1;
$("table.dataTable").each(function(index) {
$(this).find("tr:eq("+trIndex+")").each(function(index) {
$(this).find("td").removeClass("hover");
});
});
}
}, ".dataTables_wrapper tr");
[/code]
http://getbootstrap.com/2.3.2/base-css.html#tables
With my current table-hover class the highlight is split in two, the first highlight is on the columns that are on iLeftColumns and then the second highlight is on the other columns.
Allan
Allan