Row Highlighting failure kinda
Row Highlighting failure kinda
monkeytooth
Posts: 22Questions: 0Answers: 0
So Im trying to highlight rows on mouse over, and its mostly working except it ignores the column that is acting as the active sorting colum here is my last attempt, even though I have combed over these forms for a little over an hour trying various other things.
My tables are standard format tables with thead, tbody, and tfoot. I wish to only highlight those in the tbody when someone mouses over. and have all columns including the active sort highlight to match the color going across
[code]"fnDrawCallback": function(){
$('table#'+tableID+' tbody tr').bind('mouseenter', function () { $(this).children().each(function(){$(this).addClass('dataTableHighlighter');}); });
$('table#'+tableID+' tbody tr').bind('mouseleave', function () { $(this).children().each(function(){$(this).removeClass('dataTableHighlighter');}); });
}[/code]
the background-color set for odd/even and odd/even sorting_X is white by default, as I didn't want zebra stripping. Though I don't know how that effects anything but felt it was worth mentioning.
My tables are standard format tables with thead, tbody, and tfoot. I wish to only highlight those in the tbody when someone mouses over. and have all columns including the active sort highlight to match the color going across
[code]"fnDrawCallback": function(){
$('table#'+tableID+' tbody tr').bind('mouseenter', function () { $(this).children().each(function(){$(this).addClass('dataTableHighlighter');}); });
$('table#'+tableID+' tbody tr').bind('mouseleave', function () { $(this).children().each(function(){$(this).removeClass('dataTableHighlighter');}); });
}[/code]
the background-color set for odd/even and odd/even sorting_X is white by default, as I didn't want zebra stripping. Though I don't know how that effects anything but felt it was worth mentioning.
This discussion has been closed.
Replies
Allan
Allan
[code]
.dataTableHighlighter{ background-color: #FFF1E0; }
table.dataTable tr.odd { background-color: white; } /*original: #E2E4FF*/
table.dataTable tr.even { background-color: white; }
table.dataTable tr.odd td.sorting_1 { background-color: white; }/*original: #D3D6FF*/
table.dataTable tr.odd td.sorting_2 { background-color: white; }/*original: #DADCFF*/
table.dataTable tr.odd td.sorting_3 { background-color: white; }/*original: #E0E2FF*/
table.dataTable tr.even td.sorting_1 { background-color: white; }/*original: #EAEBFF*/
table.dataTable tr.even td.sorting_2 { background-color: white; }/*original: #F2F3FF*/
table.dataTable tr.even td.sorting_3 { background-color: white; }/*original: #F9F9FF*/
[/code]
is the css far as I can tell. I changed it to all white as the zebra stripping wasn't desired.
As far as adding the live, the functionality above is what I applied to live, just conforming it to a live statment rather than bind. Not sure how I would do the mouseover/out though with delegate or I'd give that a try as well.
But overall as said, the style is being applied and unapplied as desired, except the column visually does not represent that only at a code level it appears to do so.
Allan