JavaScript, фильтрация в таблице с учетом фильтра в другом столбце, c помощью элемента
Сделал связную фильтрацию, для ввода текста в input. Подскажите пожалуйста, что нужно сделать чтобы код работал с выбранным значением из select Имеется таблица, пример со срокой ниже(остальные строки аналогичны).
<table class="table table-75" id="myTable">
<thead>
<tr class="header">
<th>№</th>
<th>Date</th>
<th>Branch</th>
<th class="nowrap">NRI BS</th>
<th>Standard</th>
<th>Total RCN</th>
<th>Downtime W19</th>
<th>% W19</th>
<th>Downtime W20</th>
<th>% W20</th>
<th>Downtime W21</th>
<th>% W21</th>
<th>Reason <input type="text" placeholder="Search..."><span>X</span></th>
<th>Comment</th>
<th>Action</th>
<th>Group <input type="text" placeholder="Search..."><span>X</span></th>
<th>Responsible <input type="text" placeholder="Search..."><span>X</span></th>
<th>Deadline</th>
</tr>
</thead>
<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-05-18">
<input type="hidden" name="branch_id" value="15">
<tr>
<td> 1</td>
<td class="nowrap">2020-05-18 </td>
<td class="nowrap">Kazan </td>
<td> <a class="horizontal-menu" href="/report/sc_analysis/cells/all/15/2020-05-18/50481"> 50481 </a> </td>
<td> 3 </td>
<td> 100 </td>
<td> 55987200 </td>
<td> 23,09 </td>
<td> 57888000 </td>
<td> 5,85 </td>
<td> 55900800 </td>
<td> 22,16 </td>
<td>
<select name="reason[Kazan_50481_3]" id="selectKazan_50481_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="Стадион" rows="1" name="comment[Kazan_50481_3]">Стадион</textarea>
</td>
<td>
<textarea style="width: 250px;" title="RFC 555749/19 исп. Май" rows="1" name="action[Kazan_50481_3]">RFC 555749/19 исп. Май</textarea>
</td>
<td>
<input type="text" name="responsible_group[Kazan_50481_3]">
</td>
<td>
<input type="text" name="responsible[Kazan_50481_3]">
</td>
<td>
<input type="date" value="2020-05-31" name="deadline[Kazan_50481_3]">
</td>
</tr>
</tbody>
</table>
Вот пример javascript:
<script>
table = document.getElementById('myTable');
// Делегирование обработчика для полей ввода
table.addEventListener('input', fResultFilter);
// Назначение обработчиков для кнопок очистки
[...table.querySelectorAll('.header input + span')].forEach(function(el) {
el.addEventListener('click', function(ev) {
ev.target.previousElementSibling.value = '';
ev.target.previousElementSibling.dispatchEvent(new Event('input', { bubbles: true }));
});
});
function fResultFilter(ev) {
// Скрытие/показ кнопок очистки
ev.target.nextElementSibling.style.transform = (ev.target.value != '') ? 'scaleX(1)' : '';
// Получаем все строки, кроме заголовка
let aTRs = [...table.querySelectorAll('tr:not(.header)')];
// Получаем значения всех полей поиска
let aSearch = [...table.querySelectorAll('th > input')];
// Прогоняем строки через цепочку фильтров
aTRs.filter(function(el) {
//console.log();
if (el.children[12].childNodes[1][0].value.search(new RegExp(`${aSearch[0].value}`, 'i')) < 0) {
el.style.display = 'none';
return false;
} else {
return true;
}
}).filter(function(el) {
if (el.children[15].childNodes[1].value.search(new RegExp(`${aSearch[1].value}`, 'i')) < 0) {
el.style.display = 'none';
return false;
} else {
return true;
}
}).filter(function(el) {
//console.log(el.children[16].childNodes[1].value);
if (el.children[16].childNodes[1].value.search(new RegExp(`${aSearch[2].value}`, 'i')) < 0) {
el.style.display = 'none';
return false;
} else {
// Показываем только нужные строки
el.style.display = '';
return true;
}
});
}
</script>
верску сделал, а на JS застрал...
помогите советом, заранее спасибо!