Solved

highlight row when mouse over

Posted on 2014-03-13
11
455 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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

752 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