Row Highlighting
Row Highlighting
fresler
Posts: 7Questions: 2Answers: 0
In my table I want a row to highlight as the user mouses over it. For the first page it works great. However, it doesn't work for the other pages. This is my code:
[code]oTable=$("#"+id).dataTable({
"bJQueryUI": true,
"aLengthMenu": [[-1,10, 25, 50], ["All",10, 25, 50]],
"iDisplayLength": defaultLength,
"aaSorting": [[0,'asc']],
"bStateSave": true,
"fnDrawCallback": function() {
if(tableSettings) {
tableDisplayLength=tableSettings.iDisplayLength
}
$("#"+id+" tr:even").css("background","#dedede")
},
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/adex/mvc/public/swf/copy_csv_xls_pdf.swf"
}
})
tableSettings=oTable.fnSettings()
$("#"+id+" tr:even").css("background","#dedede")
$("#"+id+" tbody tr").each(function(){
$(this).mouseover(function(){
color=$(this).css("background-color")
$(this).css("background-color","#80C7F9");
}).mouseout(function(){
$(this).css("background-color",color);
});
});
[/code]
I tried adding
[code]
$("#"+id+" tbody tr").each(function(){
$(this).mouseover(function(){
color=$(this).css("background-color")
$(this).css("background-color","#80C7F9");
}).mouseout(function(){
$(this).css("background-color",color);
});
});
[/code]
to "fnDrawCallBack" but it really messed things up. As I moused off a row it didn't return to the previous background color.
Anyone have a solution or idea?
[code]oTable=$("#"+id).dataTable({
"bJQueryUI": true,
"aLengthMenu": [[-1,10, 25, 50], ["All",10, 25, 50]],
"iDisplayLength": defaultLength,
"aaSorting": [[0,'asc']],
"bStateSave": true,
"fnDrawCallback": function() {
if(tableSettings) {
tableDisplayLength=tableSettings.iDisplayLength
}
$("#"+id+" tr:even").css("background","#dedede")
},
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/adex/mvc/public/swf/copy_csv_xls_pdf.swf"
}
})
tableSettings=oTable.fnSettings()
$("#"+id+" tr:even").css("background","#dedede")
$("#"+id+" tbody tr").each(function(){
$(this).mouseover(function(){
color=$(this).css("background-color")
$(this).css("background-color","#80C7F9");
}).mouseout(function(){
$(this).css("background-color",color);
});
});
[/code]
I tried adding
[code]
$("#"+id+" tbody tr").each(function(){
$(this).mouseover(function(){
color=$(this).css("background-color")
$(this).css("background-color","#80C7F9");
}).mouseout(function(){
$(this).css("background-color",color);
});
});
[/code]
to "fnDrawCallBack" but it really messed things up. As I moused off a row it didn't return to the previous background color.
Anyone have a solution or idea?
This discussion has been closed.
Replies
Allan