Adding a CSS class to a table row after loading a page in an iframe with jQuery?

Question

I'm loading a form in an iframe (with facebox). When the form is submitted and the page inside the iframe is reloaded, I would like to add a CSS class to a specific table-row on the parent page.

the table looks like this:

<table>
    <tr id="row-1"><td><a href="">link to open facebox with iframe</a></td></tr>
    <tr id="row-2"><td></td></tr>
    <tr id="row-3"><td></td></tr>
    <tr id="row-4"><td></td></tr>
</table>

After the form is submitted in the iframe, the table in the parent frame should look like this:

<table>
    <tr id="row-1" **class="highlite"**>
        <td><a href="">link to open facebox with iframe</a></td>
    </tr>
    <tr id="row-2"><td></td></tr>
    <tr id="row-3"><td></td></tr>
    <tr id="row-4"><td></td></tr>
</table>

Can the community assist me in implementing this correctly?

Answer 1

$("#row-1", window.parent.document).toggleClass("highlite");

To quote Pim Jager:

The second parameter for the $() wrapper is the context in which to search. This defaults to document.

Answer 2

You may want to use .addClass instead of .toggleClass if there is a chance that the same link might be clicked and loaded again. The default behavior of .toggleClass is to check for the existence of the class on that element and then add it or remove it based on the results.

If your intention is to have only the current row highlighted, you will want to do something like:

$("#row-1", window.parent.document).addClass("highlite")
    .siblings().removeClass("highlite");