jQuery Переключить следующую строку в таблице - PullRequest
Новая
       12

jQuery Переключить следующую строку в таблице

0 голосов
/ 07 октября 2011

Я не уверен, почему это не работает ...

HTML 

<table>
<tr>
  <th>Name</th>
  <th>Options</th>
</tr>
<?php // loop over items
while ($row = mysql_fetch_assoc($qry)){ ?>
  <tr>
    <td><?=$row['name'];?></td>
    <td<a href="#" class="trigger">Detail</a></td>
  </tr>
  <tr>
    <td colspan="100%" class="details">
    stuff
    </td>
  </tr>
  <?php
} ?>
</table>

Тогда я использую jQuery ... 

$(document).ready(function () {  
  $('.trigger').click(function() {
    $(this).parents("table").siblings(".details").slideToggle();
    // also tried this...
    // $(this).parents("table").nextAll(".details").slideToggle();
    return false;
  });
});

Я пытался переместить класс деталей в TR. То, что я хотел бы, когда кто-то нажимает ссылку «Подробно», следующий TR должен переключаться. Я поместил ID в верхнюю таблицу и предупредил attr ('id') родителя, и это работает. Изменение ".siblings" на ".find" переключает их все.

Спасибо за любую помощь.

1 Ответ

5 голосов
/ 07 октября 2011

ваш html искажен, и ваш jquery не делает выбор правильного элемента ... вы переходите к элементу таблицы, а затем пробуете одно слово, но это ничего не дает.

попробуйте этот html: 

<table>
<tr>
  <th>Name</th>
  <th>Options</th>
</tr>
<?php // loop over items
while ($row = mysql_fetch_assoc($qry)){ ?>
  <tr>
    <td><?=$row['name'];?></td>
    <td><a href="#" class="trigger">Detail</a></td>
  </tr>
  <tr class="details">
    <td colspan="2">
    stuff
    </td>
  </tr>
  <?php
} ?>
</table>

и этот jquery: 

$(function(){
  $('.trigger').click(function() {
    $(this).parents("tr").next().slideToggle();
    return false;
  });
});

рабочий пример: http://jsfiddle.net/saelfaer/Z6MzS/

edit просто чтобы упомянуть, что я изменил

у вас был открытый тег <td>, в котором отсутствовал >, также я переместил class="details" в элемент <tr>, который должен быть показан / скрыт.

в jquery я изменил ваш селектор, поднявшись к таблице, поднявшись к строке таблицы, и выбрал строку таблицы .next() (которая на самом деле должна быть показана или скрыта, а затем переключена).это.

улучшений, которые вы можете сделать: сначала спрячьте tr.details корыто css 

tr.details {
  display: none;
}
...