Hi,
Here are a couple of ways to tackle this.
First just using parent(). This traverses up to the outer table and
then uses that as the context for selecting table.b :
$("table.a").click(function(){
var parent = $(this).parent().parent().parent();
$('table.b', parent).toggle();
});
Second traverses up to the tr and then uses the next tr as the context
for selecting tabel.b :
$("table.a").click(function(){
var parent = $(this).parents('tr').next();
$('table.b', parent).toggle();
});
Personally, I wouldn't rely on the structure and/or sequence of the
HTML to tie the table.a and table.b together. I'd use a class or id
attribute to tie them together.
Paul
On Feb 18, 9:59 am, Turtle3027 <becool...@gmail.com> wrote:
> The following HTML is inside a loop, so it can be repeated many times
> over.
>
> <table width="600" border="0" cellspacing="0" cellpadding="0">
> <tr>
> <td><table class="a"><tr><td></td></tr></table></td>
> <td rowspan='2'> </td>
> </tr>
> <tr>
> <td><table class="b"><tr><td></td></tr></table></td>
> </tr>
> </table>
>
> I have a click function on table.a
>
> All table.b are given hide()
>
> How do I show() only the table.b that directly follows the table.a
> that has been clicked?
>
> I have been trying something like:
>
> $("table.a").click(function(){
> $(this).
>
> From here I dont know whether to do parent() or next() or how to move
> across the tr and td to table.b
