Показать / скрыть строки таблицы на основе нажатия кнопки

0

Я хочу использовать кнопку переключения рядом со столом, чтобы скрыть или показать строки таблицы на основе того, установлен ли флажок в последнем столбце таблицы.

Вот код таблицы:

<table>
  <tr>
    <td>1<td>
    <td>Text<td>
    <td><input type="checkbox" class="form-checkbox" checked="checked"><td>
  </tr>
  <tr>
    <td>2<td>
    <td>Text<td>
    <td><input type="checkbox" class="form-checkbox"><td>
  </tr>
</table>

На боковой панели у меня есть эта кнопка:

<a id="comtoggle" class="btn" href="#">Toggle</a>

В приведенном выше примере я хотел бы, чтобы строка 1 исчезла, если нажата кнопка Toggle, но повторите ее, если снова нажать кнопку переключения. Состояние флажка хранится в базе данных и сохраняется через функцию AJAX (что отлично работает).

Вот jQuery, который у меня есть. Я думаю, что моя проблема заключается в использовании .is(': checked') в третьей строке.

$("#comtoggle").click(function() {
  if ($('.form-checkbox').is(':checked')) {
    $('.form-checkbox').is(':checked').closest('tr').toggle();
  }
});

С помощью этого фрагмента все мои строки исчезают, а консоль Firebug показывает эту ошибку:

TypeError: $target.offset(...) is null

Не уверен, что это связано.

Теги:

2 ответа

0
Лучший ответ

Полагаю, это то, что вы имеете в виду. Поймайте скрипку: http://jsfiddle.net/7C423/1 Все, что вам нужно сделать, это просто захватить то, что вас интересует, и сыграть в мяч.

$("#comtoggle").click(function() {
      $(".form-checkbox:checked").closest("tr").toggle();
});
  • 0
    Полагаю, я переборщил с утверждением if. Теперь, чтобы скрыть колонку ... Спасибо.
-2

Поскольку вы выбираете элементы по классам, вам нужно зацикливать их, и в случае их проверки скройте строку.

$("#comtoggle").click(function() { $('.form-checkbox').each(function(chk){ if($(this).is(':checked')) $(this).closest("tr").toggle(); }); });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню