jQuery setting the tr border w/ nested table on mouseover
I am having an issue getting the tr to change the border when it has a nested table. Can someone help me out with this.
Here is my table structure
<table class="SearchResults" cellpadding="0" cellspacing="0" id="tblResultsHTML">
<tbody>
<tr class="BlackHeader">
<td>header here</td>
</tr>
<tr>
<td>
<table class="SearchResults" cellpadding="2" cellspacing="0" width="100%">
<tbody>
<tr class="GroupHeader">
<td>group 1</td>
</tr>
<tr>
<td width="75%">sub 1</td>
<td valign="top">sub 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="SearchResults" cellpadding="2" cellspacing="0" width="100%">
<tbody>
<tr class="GroupHeader">
<td>group 2</td>
</tr>
<tr>
<td width="75%">sub 1</td>
<td valign="top">sub 2&l开发者_如何学Got;/td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
my jquery which worked when i didn't have nested tables is this
$('#tblResultsHTML').live("mouseover mouseout", function (event) {
if (event.type == "mouseover") {
$(this).contents('td').css({ 'border': '2px solid black', 'border-left': 'none', 'border-right': 'none' });
$(this).contents('td:first').css('border-left', '2px solid black');
$(this).contents('td:last').css('border-right', '2px solid black');
} else {
$(this).contents('td').css('border', 'none');
}
});
What I want to happen is that the whole row containing the nested table has a border when I hover it. So if I put the mouse over group 1, the whole nested table in that row will have a border. Does this make sense??
Thanks
http://jsfiddle.net/dQgXF/2/
Remove the "SearchResults" class from your outer table and try this JS:
$('.SearchResults').live(
{
mouseover: function() {
$(this).parent().css({
border:'2px solid black',
});
},
mouseout: function() {
$(this).parent().css({
border:0,
});
},
});
精彩评论