Solved

Point to a specific table

Posted on 2015-01-21
3
78 Views
Last Modified: 2015-01-21
Hi,

I have two tables on my page, that I only want the style functionality to work on the second table but not the first.

right now it hightlight any table I have on the page but what I just want to hightlight is the second table only
the JQuery and Css need to specify to apply the Style just to the second table.


here's what I have.

<script type="text/javascript" src="../../js/jquery-1.4.2.min.js" ></script> 

<style type="text/css">

body   
{    
   font: 70% Arial, Helvetica, sans-serif;    
   color: #063774;                    
}   
table   
{    
   border: 1px #B4D0F3 solid;    
   border-collapse: collapse;    
}  
tr.highlight   
{    
   background-color: #063774;   
   color: White;   
}    
th   
{    
   padding: 10px 18px;  
   text-align: left;    
}  
td   
{    
   padding: 5px 9px;    
} 

</style> 




<table background="../../images/BackgroundImg.png" style="width:100%;margin-bottom:0px;margin-left:0px;margin-right:0px; border:0px;">
	<tr>
    	<td style="width:80px;font-weight:bold;padding:5px;"><span style="color:#004080;">Search by: </span>
        </td>
    </tr>
	<tr>
     <td colspan="2" style="padding:10px;">
        <input type="text" value="" name="" size="50"> <input type="button" value="GO" name="GO">
        </td>
    </tr>
</table>





<table style="width:100%;border:none;outline:none;border-collapse: collapse;"> 
<thead>
	<tr>
    	<th style="font-weight:normal;background-image:url(../../images/BackgroundImgshort.png);text-align:left;border-top:1px #ccc solid;border-left:1px #ccc solid;
        border-bottom:1px #ccc solid;border-right:1px #e5e4e4 solid;padding-left:5px;font-size:15px;font-weight:bold;">Name
        </th>
        </tr>
 </thead>
   <tbody>
        	<tr>
    	<td style="font-weight:normal;border:none;outline:none;border-collapse: collapse;text-align:left;
        padding-left:5px;font-size:14px;">#GetSomeUsers.cn#
        </td>
        </tr>
        </tbody>
</table>


    <script language="javascript" type="text/javascript">
$(document).ready(function() {  
  
   //add class "highlight" when hover over the row  
   $('table tbody tr').hover(function() {               
      $(this).addClass('highlight');  
   }, function() {  
      $(this).removeClass('highlight');  
   });  
  
});

  </script>

Open in new window



Thank you for your help as alway can't do anything with you guys !!!!!
0
Comment
Question by:lulu50
  • 2
3 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 40562057
Hi,
the correct selector looks like this:
$('table:eq(1) tbody tr')

Sample:
http://jsfiddle.net/EE_RainerJ/kao7w818/

HTH
Rainer
0
 

Author Comment

by:lulu50
ID: 40562085
It works!!!!

Thank you Rainer Jeschor
0
 

Author Closing Comment

by:lulu50
ID: 40562086
Thank you
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…

943 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

10 Experts available now in Live!

Get 1:1 Help Now