How to hide all rows of the table that contain zeros?

Question

Good day!
How can I hide all the rows in a checkbox with columns containing only zeros?

For the time being, I come up with a variant in which all empty lines have a class < tr class="zero"> and with the help of js I change the style , but the whole table floats - the cells become different widths.
Initially I create the table myself, so it is possible to set classes and styles.

 //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>

Found this method in the Internet. He just started learning JS.

PS All options are interested, but please highlight how to do it and which methods work faster.
The table is approximate, in fact the table contains hundreds of rows.
Thank you in advance.

float because you are doing rows[i].style.display = 'block';
I send Json to the page and parsing the json on the page, if all the cells are zero, then I assign the class zero.

Accepted Answer · 2017-01-12T13:11:25

implementation in question is floating because you're doing

 rows[i].style.display = 'block';

the rows of the table must be set to display: table-row;

As an alternative to running through the desired lines in the loop and setting the visibility manually, you can set the class to a container, for example a table, and in css indicate that being inside this class, elements with class zero will have display:none .

In this case, the visibility control is governed by adding / removing the class to the container.

Example:

 //js файл function toggle() { document.querySelector('table').classList.toggle('hide-zero'); } document.getElementById('chkTest').onchange = toggle;

 .hide-zero .zero { display: none; }

 <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>

@Other, in theory, the browser can optimize the application of the style and apply it faster than you run through the elements in javascript.
But I do not think that the difference will be noticeable even with a thousand lines
@Other, I did not understand at the expense of optimization in the sense of mapping
In any case, CSS will be redrawn, but will it be noticeable due to a gradual change in properties or is the view waiting for the end of the cycle?
That is, it may be that the browser is smart and does not pull a redraw until the end of the cycle (such as with DOM there are similar optimizations).

user207618 · Answer 2 · 2017-01-12T13:04:35

display - Janus in CSS.
For tr it is table-row , so your code works, you only need to set the display back correctly:

 //js файл function toggle() { Array.from(document.querySelectorAll('.zero')).forEach(e => { e.style.display = this.checked ? 'none' : 'table-row'; }); } 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>

@Yuri, because the width of the cells is stretched in content, and the question completely changed the view
Other, Grundy, thanks, does this method work. Are there any other ways to solve this problem?
PSArray.from (document.querySelectorAll ('. Zero')). ForEach (e => {e.style.display = this.checked? 'None': 'table-row';});
@ Adrenal1ne, a bunch, but what's not comfortable with the one that already works?

Yuri yuri 13.3k five 36 82 · Answer 3 · 2017-01-12T13:04:42

Whatever floats, you can change visibility instead of display :

 function toggle() { var rows = document.getElementsByClassName('zero'); for (var i = 0; i < rows.length; i++) { if (this.checked) rows[i].style.visibility = 'hidden'; else rows[i].style.visibility = 'visible' } } 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>

SLy_huh SLy_huh 1.295 2 14 · Answer 4 · 2017-01-12T13:16:39

 $('#chkTest').on('change', function(){ //На событие изменения чекера вешаем функцию toggleZeroes(); }) function toggleZeroes(){ var target = 'table'; //целевая таблица, в нашем случае, просто любая if(!$('#chkTest').prop('checked')){ //проверяем состояние чекера $(target).find('tr').show();//если он СТАЛ ВЫКЛЮЧЕН то показываем все строки return false; //выходим из ф-ции } $(target).find('tr').each(function() {//Иначе - по каждой строке проходимся var total = 0; $(this).find('td').each(function() {// И считаем сумму всех ячеек этой строки var val = $(this).text()*1; //получаем значение ячейки, "*1" - необходимо, чтобы строго привести значение к числовому total += !isNaN(val) ? val : 0; //Если вдруг, ячейка содержит в себе значения, не переводящиеся в число, просто прибавляем к ней 0 }) if (total == 0) { //Если в строке сумма элементов - 0, прячем строку $(this).hide(); } }) }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>

A bit of a crutch, but working.

@ Adrenal1ne, well, here, de facto, only the names of functions with jQuery are to be changed to native JS, everything is the same, the current looks slightly different, shorter.
@SLy_huh, the author has zero lines already marked with a class
@Grundy Well, the question was Как можно по чекбоксу спрятать все строки таблицы, колонки которой содержат одни нули ?
The decision with the classes is copyright, and apparently, experimental.
I think if you offer something more versatile to use, it will not be worse.

How to hide all rows of the table that contain zeros?

4 answers 4

More articles: