Solved

Point to a specific table

Posted on 2015-01-21
3
87 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
[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
  • 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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

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!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

732 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