views:

136

answers:

2

I have a table with many rows of data, and I want to show or hide some of the details on each row based on a checkbox in the first element. For example:

<table>
  <tr>
    <td><span class="aspnetweirdness"><input type=checkbox></span></td>
    <td>Text Text Text</td>
    <td><select /></td>
    <td><input type=text></td>
  </tr>
</table>

I'm looking to traverse from the checkbox to the cousin elements (the text, the select, and the text input) with jquery and toggle the visibility on those elements based on whether the checkbox is checked. One small snag is that the checkbox is wrapped in a span, since this is being output by asp.net. That also makes the elements harder to get at by id.

How would I go about doing this? I've tried $(this).parentsUntil('tr').siblings(), but it doesn't seem like i get the right elements.

Any help would be appreciated.

EDIT:

 $(".crewMemberTable input:checkbox").toggle(function() {
            $(this).closest('tr').find('select, input:not(:checkbox)').fadeIn();
            $(this).closest('tr').find('label').css('font-weight', 'bold');
        }, function() {
            $(this).closest('tr').find('select, input:not(:checkbox)').fadeOut();
            $(this).closest('tr').find('label').css('font-weight', 'normal');
        });
+1  A: 

Well have you tried:

$(this).closest('tr').find('td:not(:first-child)')

where "this" would be your checkbox element if the code were in a "click" handler or something.

Pointy
This got me in the ballpark, thanks!
Barry
A: 
$('input[type=checkbox]').click(function() {
  $(this).closest('td').siblings().find('select,input').hide();
});
Keith Rousseau
Actually he probably doesn't always want to hide the other elements; he'd probably want to show them when the checkbox is checked, and hide them otherwise, or else maybe vice-versa.
Pointy
I realize that he doesn't want to always hide them. It was an example of how to find them.
Keith Rousseau