For my project CivCRM, I wrote a simple jquery plugin to change the row color on mouse hover. It is generic enough and can be used in any project. Here is the implementation.
1. Create a plugin file: jquery.crmrowhighlighter.js
(function($){ $.fn.crmrowhighlighter = function(){
if ($(‘.crm-row-highlighter-processed’).length == 0){
$(‘.selector tr’).hover(function(){
$(this).addClass(‘crm-row-highlight’);
},function(){
$(this).removeClass(‘crm-row-highlight’);
});
$(‘.selector’).addClass(‘crm-row-highlighter-processed’);
};
};
})(jQuery);
2. Create css file: my.css
.crm-row-highlight {
background-color: #FFFFCC !important;
}
Usage:
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.crmrowhighlighter.js”></script>
<style type=”text/css”>@import url(“my.css”);</style>
<table class=”selector”>
<tr> Row 1: Hover to change the color</tr>
<tr> Row 2: Hover to change the color</tr>
</table>
<script type=”text/javascript”>
$( function(){
$().crmrowhighlighter( );
});
</script>
Note: You need to have table’s class = “selector”
That’s it, now when you hover the row color will change. Hope this helps.
