Фильтрация рядов таблицы

Модератор: [mweb team]

Фильтрация рядов таблицы

Сообщение Padonak Пт янв 20, 2023 17:56

На одном буржуйском форуме попался вопрос о том, как организовать фильтрацию рядов таблицы на основе выбора одного, нескольких или всех чекбоксов. В каждом ряду таблицы имеется ячейка с названием страны, а у чекбоксов, за исключением чекбокса All, атрибут value тоже содержит названия стран, что и является критерием фильтрации. Я решил добавить ещё логичность в поведение чекбокса All: он может выбирать все остальные чекбоксы, при снятии галки с любой страны чекбокс All тоже теряет галку, а также, при последовательном выборе всех других чекбоксов, он автоматически самовыбирается, если выбраны все страны. Разметка взята у автора вопроса, все эти классы и прочая херня не имеют значения.

Код: Выделить всё
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
   <style>
   .r{
   color: crimson;
   background-color: lightsteelblue;
   }
   </style>
  </head>
  <body>   
<table class="table table-striped border table-row-bordered table-row-gray-1000 border gy-7 gs-7">
<thead style="background-color: #366687;">
<tr class="fw-semibold fs-6 text-white border-bottom border-gray-200">
<th>Logo</th>
<th>Media Name</th>
<th>Language</th>
<th>Location</th>
<th>Media Type</th>
<th>Industry</th>
<th>Potential Audience</th>
<th>Screenshot</th>
</tr>
</thead>
<tbody id="websiteTable">
<tr>
<td>logo</td>
<td>ame <span style="display:block"><a href="{{$news_url}}" target="_blank">View Link</a></span></td>
<td>language</td>
<td>Japan</td>
<td>type->name</td>
<td>category->name</td>
<td>potential_audience</td>
<td><i class="fa fa-camera" style="font-size: 19px;color: #366687;padding-left: 27px;"></i></td>
</tr>
<tr>
<td>logo</td>
<td>name <span style="display:block"><a href="{{$news_url}}" target="_blank">View Link</a></span></td>
<td>language</td>
<td>USA</td>
<td>type->name</td>
<td>category->name</td>
<td>potential_audience</td>
<td><i class="fa fa-camera" style="font-size: 19px;color: #366687;padding-left: 27px;"></i></td>
</tr>
<tr>
<td>logo</td>
<td>name <span style="display:block"><a href="{{$news_url}}" target="_blank">View Link</a></span></td>
<td>language</td>
<td>China</td>
<td>type->name</td>
<td>category->name</td>
<td>potential_audience</td>
<td><i class="fa fa-camera" style="font-size: 19px;color: #366687;padding-left: 27px;"></i></td>
</tr>
</tbody>
</table>

<div class="card-body">

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" value="All" />All</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" name="location[]" value="China" />China</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" name="location[]" value="Japan" />Japan</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" name="location[]" value="USA" />USA</label>
</div>

</div>

<script>
const tab = document.querySelector('#websiteTable'),
      trs = [...tab.querySelectorAll('tr')],
     chbs = [...document.querySelectorAll('.form-check-input')];

chbs.forEach( x => {

x.addEventListener('click', function(){
const val = this.value,
      chkd = document.querySelectorAll('[type="checkbox"]:checked');

if(val != 'All'){
const tr = trs.filter( x => x.querySelector('td:nth-child(4)').textContent == val )[0];
this.checked ?
[tr.classList.add('r'), chkd.length == chbs.length - 1 ? chbs[0].checked = 1 : null ] :
[tr.classList.remove('r'), chbs[0].checked = 0];
}

else{
chbs.forEach( c => c.checked != this.checked ? c.click() : null );
}

});

});
</script>
</body>
</html>
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Вернуться в Javascript

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron