highlight row when mouse over

Hi,

I need to highlight a row when mouse hover over it.

My code:

CSS

 .selectedRow {
      background-color: blue;
      cursor: pointer;
   }

Open in new window



Jquery


$(document).ready(function () {

   $(function() {
      $('.ResultListTbl table tr').mouseover(function() {
         $(this).addClass('selectedRow');
      }).mouseout(function() {
         $(this).removeClass('selectedRow');
      }).click(function() {
         alert($('td:first', this).text());
      });
   });

	});

Open in new window





HTML


<table style="width:100%;border: solid 1px #dddddd;" id="ResultListTbl">

<tr style="background-color:#d0d2d3;font-weight:bold;">
 <th style="width:80px;padding-left:3px;">Issue ID</th>
 <th style="width:100px;">Ticket#</th>
 <th style="width:300px;">Title</th>
 <th style="width:50px;">Status</th>
 <th style="width:100px;">Date</th>
  <th style="width:50px;">&nbsp;</th>
</tr>

<cfoutput query="QSearchResult">
<tr >
 <cfif val(QSearchResult.ParentIssueID)> 
   <td class="RowOne" style="padding-left:20px;">#QSearchResult.issueID#</td>
 <td class="RowOne">#QSearchResult.ticketNumberTxt#</td>
 <td class="RowOne">#QSearchResult.TitleOfIssue#</td>
 <td class="RowOne">#QSearchResult.Status#</td>
  <td class="RowOne">#DateFormat(QSearchResult.DateCreated, "m/d/yyyy")#</td>
    <td class="RowOne">Edit</td>
 <cfelse>
   <td class="RowTwo">#QSearchResult.issueID#</td>
 <td class="RowTwo">#QSearchResult.ticketNumberTxt#</td>
 <td class="RowTwo">#QSearchResult.TitleOfIssue#</td>
 <td class="RowTwo">#QSearchResult.Status#</td>
  <td class="RowTwo">#DateFormat(QSearchResult.DateCreated, "m/d/yyyy")#</td>
  <td class="RowTwo">Edit</td>
 </cfif>
   
</tr>
</cfoutput>
</table>

Open in new window

lulu50Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
Test page : http://jsfiddle.net/6U4ED/1/

$(document).ready(function () {

 //  $(function() { // redundant $(document).ready(function () {
    
    var overTR = function() {
         $(this).addClass('selectedRow');
      };
    
    var outTR =function() {
         $(this).removeClass('selectedRow');
      };

    var clickedTR = function() {
         alert($('td:first', this).text());
      };
    
      $('#ResultListTbl tr').hover(overTR, outTR).click(clickedTR);

    //   });

});

Open in new window

0
 
lulu50Author Commented:
I still cannot get it to highlight
0
 
leakim971PluritechnicianCommented:
where to see your integration?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
GaryCommented:
    $("#ResultListTbl tr").hover(function(){
      $(this).toggleClass("selectedRow")  
    }) 

Open in new window

0
 
lulu50Author Commented:
The problem I am having is that

it is highlighting only the child record but not the parent because it has a background set for the row.

If I remove this class (bgrow) from my parent row it will work fine

but I want the parent row to have a background color.

   var overTR = function() {
         $(this).addClass('selectedRow');
      };
    var outTR =function() {
         $(this).removeClass('selectedRow');
      };
      $('#ResultListTbl tr').hover(overTR, outTR);
	});



 .selectedRow {
      background-color: #d0d2d3;
      cursor: pointer;
   }

.bgrow {
	 background-color: #f5f6f7;
}


<table style="width:100%;border: solid 1px #dddddd;" id="ResultListTbl">

<tr style="background-color:#d0d2d3;font-weight:bold;">
 <th style="width:80px;padding-left:3px;">Issue ID</th>
 <th style="width:100px;">Ticket#</th>
 <th style="width:300px;">Title</th>
 <th style="width:50px;">Status</th>
 <th style="width:100px;">Date</th>
  <th style="width:50px;">&nbsp;</th>
</tr>

<cfoutput query="QSearchResult">

 <cfif val(QSearchResult.ParentIssueID)> 
 <!-- //Child Row -->
 <tr>
   <td style="padding-left:20px;">#QSearchResult.issueID#</td>
 <td>#QSearchResult.ticketNumberTxt#</td>
 <td>#QSearchResult.TitleOfIssue#</td>
 <td>#QSearchResult.Status#</td>
  <td>#DateFormat(QSearchResult.DateCreated, "m/d/yyyy")#</td>
    <td>Edit</td>
    </tr>
 <cfelse>
<!-- //Parent Row -->
 <tr class="bgrow">
   <td style="font-weight:bold;">#QSearchResult.issueID#</td>
 <td>#QSearchResult.ticketNumberTxt#</td>
 <td>#QSearchResult.TitleOfIssue#</td>
 <td>#QSearchResult.Status#</td>
  <td>#DateFormat(QSearchResult.DateCreated, "m/d/yyyy")#</td>
  <td>Edit</td>
  </tr>
 </cfif>
   

</cfoutput>
</table> 
   

Open in new window

0
 
leakim971PluritechnicianCommented:
please post the rendered HTML, not your coldfusion code
0
 
lulu50Author Commented:
var overTR = function() {
         $(this).addClass('selectedRow');
      };
    var outTR =function() {
         $(this).removeClass('selectedRow');
      };
      $('#ResultListTbl tr').hover(overTR, outTR);
	});



 .selectedRow {
      background-color: #d0d2d3;
      cursor: pointer;
   }

.bgrow {
	 background-color: #f5f6f7;
}


<table id="ResultListTbl" style="border-bottom: #dddddd 1px solid; border-left: #dddddd 1px solid; width: 100%; border-top: #dddddd 1px solid; border-right: #dddddd 1px solid;" sizzle-1394728842740="[object Object]">
<TBODY>
<TR style="BACKGROUND-COLOR: #d0d2d3; FONT-WEIGHT: bold" jQuery110204614065912006665="22">
<TH style="PADDING-LEFT: 3px; WIDTH: 80px">Issue ID</TH>
<TH style="WIDTH: 100px">Ticket#</TH>
<TH style="WIDTH: 300px">Title</TH>
<TH style="WIDTH: 50px">Status</TH>
<TH style="WIDTH: 100px">Date</TH>
<TH style="WIDTH: 50px">&nbsp;</TH></TR><!-- //Parent Row -->
<TR class=bgrow jQuery110204614065912006665="24">
<TD style="FONT-WEIGHT: bold">44</TD>
<TD></TD>
<TD>Title of Issue</TD>
<TD>Open</TD>
<TD>3/11/2014</TD>
<TD>Edit</TD></TR><!-- //Parent Row -->
<TR class=bgrow jQuery110204614065912006665="25">
<TD style="FONT-WEIGHT: bold">43</TD>
<TD></TD>
<TD>Title of Issue</TD>
<TD>Open</TD>
<TD>3/11/2014</TD>
<TD>Edit</TD></TR></TBODY>
</body>

Open in new window

0
 
GaryConnect With a Mentor Commented:
Swap your CSS round so .selectedRow comes after .bgrow
0
 
leakim971PluritechnicianCommented:
or use : background-color: #d0d2d3 !important;
instead : background-color: #d0d2d3;
0
 
lulu50Author Commented:
Gary,

you are genius!!!!!

I spent a lot of time on it, trying to get it to work but you know as usual nothing works with me.  Wow, that did the trick..  

Thank you leakim971 for your help too.
0
 
lulu50Author Commented:
Thank you for all your help!!

Excellent++++
0
All Courses

From novice to tech pro — start learning today.