Добрый день!
Как можно по чекбоксу спрятать все строки таблицы, колонки которой содержат одни нули ?
Мне пока приходит в голову вариант, при котором все пустые строки имеют класс < tr class="zero">
и с помощью js
меняю style
, но при этом вся таблица плывёт - ячейки становятся разной ширины.
Изначально таблицу создаю сам, поэтому есть возможность устанавливать классы и стили.
//js файл
function toggle() {
var rows = document.getElementsByClassName('zero');
for (var i = 0; i < rows.length; i++) {
if (this.checked)
rows[i].style.display = 'block';
else
rows[i].style.display = 'none'
}
}
document.getElementById('chkTest').onchange = toggle;
<input type="checkbox" id="chkTest" />
<label for="chkTest">Hide all zero rows</label>
<table>
<tr class="zero">
<td>Ivanov</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Petrov</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>9</td>
<td>8</td>
<td>0</td>
</tr>
<tr class="zero">
<td>Sidorov</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="zero">
<td>Morozov</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Tosterov</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
Нашел данный способ на просторах инета. Сам только начал изучать JS.
P.S. Интересуют все варианты, но выделите, пожалуйста, как следует делать и какие способы быстрее работают.
Таблица примерная, по факту таблица содержит сотни строк.
Заранее спасибо.
rows[i].style.display = 'block';
у строк таблицы нужно устанавливатьdisplay: table-row;
zero
?