Solved

highlight row when mouse over

Posted on 2014-03-13
11
450 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
  • 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Asp in script 6 38
Find closest specified item from present item - Javascript 5 33
Binding a Grid in Javascript 5 43
GET error with Font Awesome 3 14
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

860 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