переключая дисплей тр в таблице

Question

Допустим, это мой стол:

<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> 

Использование Javascript, я хочу, чтобы иметь возможность переключать display: none элемент строк нижележащие я нажимаю на ... но только если я щелкнул внутри первой ячейки в каждой строке.

Например, если я нажал на ячейке, содержащей a, то tr, содержащие клетки b, three и four и tr, содержащие клетки c, five и six не показывать, пока я снова не нажал ее. Нажатие one или two ничего не сделало.

Таблица, в которой я собираюсь использовать этот код, намного больше.

Answer 1

С JQuery, это очень легко:

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

Я буду обновлять свой ответ с простой JavaScript ответ, если я нашел.

Answer 2

Использование JQuery:

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

http://jsfiddle.net/