Показать / Скрыть элементы таблицы, которые были сгенерированы случайным образом с помощью события клика

Question

У меня есть несколько таблиц, которые генерируются случайным образом. Я хочу, чтобы отображалась только первая строка каждой таблицы, а остальные строки были скрыты. Когда я нажимаю на видимую строку для таблицы, я хочу, чтобы остальные ее строки / содержимое отображались / скрывались. Как бы я сделал это с помощью Jquery?

Answer 1

Чтобы скрыть все строки, кроме первой:

$("table tbody tr:not(:first-child)").hide();

Чтобы сделать их видимыми при нажатии на первый ряд:

$("table tbody tr:first-child").click(function() {
  $(this).siblings().show();
});

В качестве альтернативы вы можете организовать свои таблицы немного по-другому (если возможно):

<style type="text/css">
table tbody tr { display: none; }
</style>
<script type="text/javascript">
$(function() {
  $("table thead tr").click(function() {
    $("tbody tr", $(this).parents("table")[0]).show();
  });
});
</script>
<table>
<thead>
  <tr> ... first row is in thead not tbody ... </tr>
</thead>
<tbody>
  <tr> ... row1 .. </tr>
  <tr> ... row2 .. </tr>
  <tr> ... row3 .. </tr>
</tbody>
</table>

Есть много способов снять кожу с этой конкретной кошки.

Answer 2

Вы должны написать несколько функций, подобных этой:

function AttachEvent(tableId)
{
    $("#" + tableId + " tbody tr:first-child").click(ToggleRows);
}

function ToggleRows(e)
{
    // get src table of e
    // you can find code for this on SO or quirksmode.org (or basically anywhere)

    $(src).find("tr").hide();
    $(src).find("tr:first-child").show();
}

Если вы вызовете AttachEvent с идентификатором таблицы, когда она будет сгенерирована, событие будет привязано к первой строке.

Эти функции предполагают, что таблица генерируется со всеми строками, кроме строки [0], для которой установлено отображение: нет.

Я не проверял это, но теория должна работать. Возможно, вам придется изменить некоторые вещи, например, какое событие связывать, а также использовать ли tr или tds для отображения / скрытия.

Answer 3

Я столкнулся с аналогичной необходимостью, но показал / скрыл tbody (jQuery, похоже, зависал при попытке переключения большого количества строк). Мои таблицы идентифицируются по классу «datatable», и я использую .toggle () (доступно с версии jQuery 1.0) на основе решения Cletus:

$(document).ready(function() {
        //SK toggles datatables (show/hide tbody when clicking thead)
       $('table.datatable thead tr').on('click', function( event ) { 
           $('tbody', $(this).parents('table')[0]).toggle(); });

})

это предполагает, что ваши таблицы организованы в соответствии со спецификацией html5 с thead и tbody. см. также http://api.jquery.com/toggle/