Solved

Point to a specific table

Posted on 2015-01-21
3
72 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
Comment Utility
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
Comment Utility
It works!!!!

Thank you Rainer Jeschor
0
 

Author Closing Comment

by:lulu50
Comment Utility
Thank you
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
can't display bootstrap glyphs in select menu 4 15
Creating a slider 12 32
gif animation 6 16
Problem to page 4 17
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

744 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

15 Experts available now in Live!

Get 1:1 Help Now