How to add a CSS class to a table row after loading a page in an iframe with Jquery

Question

Hi,

I'm loading a form in an iframe (with facebox). When the form is submitted and the page inside the iframe is reload, 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 on 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>

Thanks in advance for any help.

Kind regards, BBJ

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");