Link to home
Start Free TrialLog in
Avatar of lulu50
lulu50Flag for United States of America

asked on

Point to a specific table

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 !!!!!
ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of lulu50

ASKER

It works!!!!

Thank you Rainer Jeschor
Avatar of lulu50

ASKER

Thank you