CODEWITHSUNDEEP
javascripthtml-table
user1129274
user1129274

Reputation: 101

Toggling tr display in a table

Let's say this is my table:

<table>
  <tr>
    <td>a</td>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>b</td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>c</td>
    <td>five</td>
    <td>six</td>
<table>

Using Javascript, I want to be able to toggle the display: none element of the rows below the one I click on... but only if I click inside the first cell in each row.

For example, if I clicked on the cell containing a, the tr containing the cells b, three, and four and the tr containing the cells c, five, and six wouldn't display until I clicked it again. Clicking one or two would not do anything, though.

The table I am going to be using this code on is much larger, though.

Upvotes: 1

Views: 203

Answers (2)

bardiir
bardiir

Reputation: 14782

Using jQuery:

jQuery('table').find('tr').find('td:first').click(function() {
    jQuery(this).parent().next().toggle();
});

http://jsfiddle.net/

Upvotes: 0

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

With jQuery, it's really easy:

$("table tr td:first-child").click(function() {
    $(this).parent().nextAll().toggle();
});

I'll update my answer with a plain JavaScript answer if i find one.

Upvotes: 1

Related Questions