Question

I have a table structure:

<table style="width: 100%;">
            <tr>
                <td>
                  <a href="#" class="xx">one</a>
                </td>
                <td>Two</td>
                <td>Three</td>

            </tr>
            <tr>
                <td>
                  <a href="#" class="xx">Four</a>
                </td>
                <td>Five</td>
                <td>Six</td>

            </tr>
            <tr>
                <td>
                  <a href="#" class="xx">Seven</a>
                </td>
               <td>Eight</td>
                <td>Nine</td>

            </tr>
        </table>

CSS:

 .yy
    {
     background-color: red;    
    }

Now the problem is if I click on the <a> its corresponding <tr> element (<tr> that holds the <a>) background should be red, again if I click on the same <a> it should come back to normal.
How to identify the the <tr> on which the <a> is clicked.

EDIT:
I tried:
$(“.yy”).not($(this).parent().parent()).removeClass(“yy”);
$(this).parent().parent().toggleClass(“yy”);
it worked.

Answer 1

$('a').live('click', function(){

$(this).parent().parent() //this is how you select the <tr> that the <a> is in

//first .parent() gets the <td> second .parent() gets the <tr>

});

Let me know if you need more. There might be a better way but I’m not positive.