Флажки скрывают группы строк из таблицы

Question

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

Я хотел бы сделать это без jQuery, просто ваниль Javascript.

Я видел множество методов на этом сайте и другие, но всегда фрагменты кода, а не полные рабочие примеры.

Я не хочу давать каждой строке отдельное имя div или что-то еще, я предполагаю, что я могу сделать это с помощью обычного класса для трех типов строк, которые я хочу скрыть/открыть.

Может ли кто-нибудь показать мне рабочий пример, который позволяет флажкам скрывать/показывать несколько строк из таблицы с помощью ванильного Javascript?

Answer 1

Учитывая HTML вроде следующего:

<table> 
    <thead> 
     <tr> 
      <td> 
       <label> 
        <input type="checkbox" class="show" value="north" checked />North</label> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <label> 
        <input type="checkbox" class="show" value="south" checked />South 
       </label> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <label> 
        <input type="checkbox" class="show" value="outOfArea" checked />Out of area 
       </label> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="north"> 
      <td>North One</td> 
     </tr> 
     <tr class="north"> 
      <td>North Two</td> 
     </tr> 
     <tr class="outOfArea"> 
      <td>Out-of-area One</td> 
     </tr> 
     <tr class="south"> 
      <td>South One</td> 
     </tr> 
     <tr class="south"> 
      <td>South Two</td> 
     </tr> 
     <tr class="north"> 
      <td>North Three</td> 
     </tr> 
     <tr class="north"> 
      <td>North Four</td> 
     </tr> 
     <tr class="south"> 
      <td>South Three</td> 
     </tr> 
     <tr class="outOfArea"> 
      <td>Out-of-area Two</td> 
     </tr> 
    </tbody> 
</table> 

Следующая JQuery, кажется, делает, как вы , кажется описать:

$('thead input[type=checkbox]').change(function(){ 
    var self = this; 
    $(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked); 
}); 

JS Fiddle demo.

Как мне кажется, что вы предпочли бы подход равнинно-JavaScript, я хотел бы предложить следующее (для работы на тот же HTML, как писал выше):

function toggle (e) { 
    var self = e.target, 
     toggleClass = '.' + self.value, 
     toToggle = document.querySelectorAll(toggleClass); 
    for (var i = 0, len = toToggle.length; i < len; i++) { 
     toToggle[i].style.display = self.checked ? 'table-row' : 'none'; 
    } 
} 

var thead = document.querySelector('thead'); 
thead.addEventListener('change', toggle); 

JS Fiddle demo.

Ссылки:

• JQuery:
  • Attribute-equals ([attribute="value"]) selector.
  • change().
  • closest().
  • find().
  • filter().
  • toggle().
• Plain JavaScript:
  • document.querySelector().
  • document.querySelectorAll().
  • EventTarget.addEventListener().

Answer 2

Похоже вы описываете что-то вдоль линий this example