Множестванная фильтрация таблицы JS
Нужна помощь.
Имеется таблица, и 3 input по которым нужно отфильтровать строки.
При этом фильтра связаны, то есть если в первом input есть значение, ввод следующего работает с отфильтрованным результатом первого и т.д.(надеюсь понятно говорю)
На каждый input по колонке. Как добиться того, чтобы была множественная фильтрация всей таблицы по определенным колонкам????
То что сделал на данный момент с JS
function searchColumns() {
var inputReason, inputGroup, inputResponsible, filterReason, filterGroup, filterResponsible, found, table, tr, td, i, j, tdValue;
inputReason = document.getElementById("searchInputReason");
inputGroup = document.getElementById("searchInputGroup");
inputResponsible = document.getElementById("searchInputResponsible");
filterReason = inputReason.value.toUpperCase();
filterGroup = inputGroup.value.toUpperCase();
filterResponsible = inputResponsible.value.toUpperCase();
let filters = [
{
name: 'reason',
value: filterReason
},
{
name: 'group',
value: filterGroup
},
{
name: 'responsible',
value: filterResponsible
}
];
table = document.getElementById("searchTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
// считываем все что есть в td как сроку в tdValue
var tdValue = td[j].innerHTML.toUpperCase();
// предполагаем что в этом td есть выпадашка(и), берем первую попавшуюся
var dropdown = td[j].getElementsByTagName('select')[0];
// если в этом td реально была выпадашка, то перезаписываем tdValue
if (typeof(dropdown) !== "undefined") {
// значение берем из options по ключу полученному из dropdown.selectedIndex
tdValue = dropdown.options[dropdown.selectedIndex].value.toUpperCase();
}
// проверка на совпадение фильтра и tdValue
if (tdValue.indexOf(filterReason) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}
И пример структуры таблицы с которой я работаю.
<table class="table table-75">
<!-- Header -->
<thead>
<tr>
<th>№</th>
<th>Date</th>
<th>Branch</th>
<th class="nowrap">BS</th>
<th>Standard</th>
<th>Total </th>
<th>W15</th>
<th>% W15</th>
<th>W16</th>
<th>% W16</th>
<th>W17</th>
<th>% W17</th>
<th> <input style="width: 100px;" id="searchInputReason" onkeyup="searchColumns()" type="text" placeholder="Reason.."></th>
<th>Comment</th>
<th>Action </th>
<th> <input style="width: 100px;" id="searchInputGroup" onkeyup="searchColumns()" type="text" placeholder="Group.."></th>
<th> <input style="width: 100px;" id="searchInputResponsible" onkeyup="searchColumns()" type="text" placeholder="Responsible.."></th>
<th>Deadline</th>
</tr>
</thead>
<!-- Body -->
<tbody id="searchTable">
<form name="form" id="form" class="form-inline" action="/report/sc_analysis/write" method="post"></form>
<input type="hidden" name="user_id" value="149">
<input type="hidden" name="period" value="2020-04-20">
<input type="hidden" name="branch_id" value="33">
<tr>
<td> 1</td>
<td class="nowrap">2020-04-20 </td>
<td class="nowrap">Barnaul </td>
<td> <a class="horizontal-menu" href="/report/sc_analysis/cells/all/33/2020-04-20/41627"> 41627 </a> </td>
<td> 3 </td>
<td> 6 </td>
<td> 3628800 </td>
<td> 4,97 </td>
<td> 3628800 </td>
<td> 5,43 </td>
<td> 3628800 </td>
<td> 6,25 </td>
<td>
<select name="reason[Barnaul_41627_3]" id="selectBarnaul_41627_3">
<option value="Правка в Глобус" selected="">Правка в Глобус</option>
<option value="Нулевой">Нулевой</option>
<option value="Оперативный">Оперативный</option>
<option value="Планирование">Планирование</option>
<option value="Правка в Глобус">Правка в Глобус</option>
<option value="Правка в NRI">Правка в NRI</option>
<option value="Правка в NIS">Правка в NIS</option>
<option value="Проблемная">Проблемная</option>
<option value="РИЧ">РИЧ</option>
<option value="СГОН">СГОН</option>
<option value="LTЕ сбой">LTЕ сбой</option>
<option value="Доп. анализ">Доп. анализ</option>
</select>
</td>
<td>
<textarea style="width: 250px;" title="C 21.04 TT №: 21643085 на Глобусе, добавлена зависимость до 30.06.2020 с внешней системой " almi",="" номер="" glbs-851."="" rows="1" name="comment[Barnaul_41627_3]">C 21.04 TT №: 21643085 на Глобусе, добавлена зависимость до 30.06.2020 с внешней системой "ALMI", номер glbs-851.</textarea>
</td>
<td>
<textarea style="width: 250px;" rows="1" name="action[Barnaul_41627_3]"></textarea>
</td>
<td>
<input style="width: 100px;" type="text" name="responsible_group[Barnaul_41627_3]">
</td>
<td>
<input style="width: 100px;" type="text" name="responsible[Barnaul_41627_3]">
</td>
<td>
<input type="date" name="deadline[Barnaul_41627_3]">
</td>
</tr>
</tbody>
</table>