Связывание div с одним и тем же счетчиком с помощью Jquery

Question

У меня есть таблица, которая получает данные из базы данных, используя PHP.

Таблица содержит 2 родительских элемента, допустим, они:

Name    Surname    << table row id = info1

Name    Surname    << table row id = info2

Под каждой строкой есть другая строка, которая по умолчанию скрыта. При нажатии на имя, я хочу, чтобы оно отображалось:

Name    Surname    << table row id = info1
DOB     City       << table row id = infoSub1

Name    Surname    << table row id = info2
                   << table row id = infoSub2 NOT DISPLAYED

Как я могу реализовать это наиболее эффективным способом?

Спасибо

Answer 1

Если вы можете дать родительским строкам класс (например, parent), то вы можете сделать это очень универсальным с помощью .nextUntil():

$("tr.parent").click(function() {
  $(this).nextUntil(".parent").toggle();
});

Это просто выбирает все элементы <tr>, которые не являются .parent после строки, по которой щелкают, пока не найдет тот, который есть. Это позволяет вам использовать любое количество промежуточных строк, не являющихся родителями, и правильно переключать их все. Если у вас длинная таблица с большим количеством строк, используйте .delegate() аналогичным образом:

$("#tableID").delegate("tr.parent", "click", function() {
  $(this).nextUntil(".parent").toggle();
});

Это ведет себя так же, но к <table> подключается один обработчик событий (а не по одному на каждого родителя <tr>).

Answer 2

$("#info1").click(function() {
    $(this).children("#infoSub1").slideDown();
});

Затем сделайте то же самое для info2 и infoSub2:)