lulu50
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.
Thank you for your help as alway can't do anything with you guys !!!!!
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>
Thank you for your help as alway can't do anything with you guys !!!!!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you
ASKER
Thank you Rainer Jeschor