Убрать лишние строки в таблице javascript
Есть таблица:
<table class="s-table">
<tr>
<th>mac</th>
<th>name</th>
<th>port</th>
<th>manufacter</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>21</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>21</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>23</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>19</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
</tbody>
</table>Задача состоит в том, чтобы с помощью Javascipt из данной таблицы убрать строки с портом 25 (остальные оставить) с помощью чекбокса, подскажите знающие в какую сторону стоит капать?
Ответы (2 шт):
Автор решения: De.Minov
→ Ссылка
Допустим так.
let table = document.querySelector('.s-table'),
filter = document.querySelector('.port-filter'),
rowsPort = {}; // Тут будем хранить массив элементов TR по значению TR > TH[2] === который равен колонке port
// Формируем объект с портами
[...table.querySelectorAll('tbody > tr')].map(e => { // Проходим по всем строкам
let id = e.querySelectorAll('td')[2].innerText; // Получаем значение колонки port
if(!rowsPort[id]) rowsPort[id] = []; // Если такого значения ещё нет в объекте, то создаём под него массив
rowsPort[id].push(e); // И пушим туда всю строку
});
// Формируем вывод фильтров
for(let item in rowsPort) { // Проходим циклом по объекту
filter.innerHTML += `<br><label for="rows-filter-${item}">${item}</label> - <input id="rows-filter-${item}" data-id="${item}" type="checkbox" checked/>` // Создаём разметку. Inputу в data-id передаём значение ключа, чтобы проще было её получать в механике фильтра
}
// Механика фильтра
filter.addEventListener('click', e => { // При клике на область блока
if(e.target.tagName === 'INPUT') { // Проверяем, было ли нажатие по INPUT (вернёт, даже если нажмём на label, чей for соответствует id inputа)
let input = e.target, // получаем элемент
id = input.getAttribute('data-id'); // получаем его ID
rowsPort[id].map(e => e.style.display = input.checked ? '' : 'none'); // Проходим по всем строкам, что находятся rowsPort[data-id], и скрываем или отображаем, в зависимости от input.checked, через display
}
});<div class="port-filter">Filter port:</div>
<hr>
<table class="s-table">
<thead>
<tr>
<th>mac</th>
<th>name</th>
<th>port</th>
<th>manufacter</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>21</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>21</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>23</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>19</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
</tbody>
</table>Чтобы разово убрать только строки с портом 25, то так:
[...document.querySelectorAll('.s-table > tbody > tr')].map(e => { // Проходим по строкам
let value = e.querySelectorAll('td')[2].innerText; // Получаем значение ячейки, которая равна ячейке port
if(value === '25') e.style.display = 'none'; // или e.remove();
});<table class="s-table">
<thead>
<tr>
<th>mac</th>
<th>name</th>
<th>port</th>
<th>manufacter</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>21</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>21</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>23</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>19</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
</tbody>
</table>
Автор решения: Qwertiy
→ Ссылка
for (let td of document.querySelectorAll("td:nth-child(3)")) {
td.closest("tr").dataset.port = +td.textContent
}#show25:not(:checked) ~ .s-table [data-port="25"] {
display: none;
}<input type="checkbox" id="show25"><label for="show25"> Show port 25</label>
<table class="s-table">
<thead>
<tr>
<th>mac</th>
<th>name</th>
<th>port</th>
<th>manufacter</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>21</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>21</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>23</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>19</td>
<td>Intel Corporation</td>
</tr>
<tr>
<td>00:07:e9:32:e5:58</td>
<td>Switch90</td>
<td>25</td>
<td>Microsoft Corporation</td>
</tr>
</tbody>
</table>