Solved

highlight row when mouse over

Posted on 2014-03-13
11
439 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to dynamically set the form action using jQuery.

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now