Solved

highlight row when mouse over

Posted on 2014-03-13
11
457 Views
Last Modified: 2014-03-13
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

0
Comment
Question by:lulu50
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
11 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 39926505
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
 

Author Comment

by:lulu50
ID: 39926549
I still cannot get it to highlight
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39926560
where to see your integration?
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 58

Expert Comment

by:Gary
ID: 39926607
    $("#ResultListTbl tr").hover(function(){
      $(this).toggleClass("selectedRow")  
    }) 

Open in new window

0
 

Author Comment

by:lulu50
ID: 39926801
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39926813
please post the rendered HTML, not your coldfusion code
0
 

Author Comment

by:lulu50
ID: 39926885
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39926915
Swap your CSS round so .selectedRow comes after .bgrow
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39927018
or use : background-color: #d0d2d3 !important;
instead : background-color: #d0d2d3;
0
 

Author Comment

by:lulu50
ID: 39927022
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
 

Author Closing Comment

by:lulu50
ID: 39927032
Thank you for all your help!!

Excellent++++
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question