Question

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</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

Answer 1

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,
            });
        },
    });