Как спрятать все строки таблицы, которые содержат нули?

Question

[Adrenal1ne1]

Добрый день!
Как можно по чекбоксу спрятать все строки таблицы колонки которой содержат одни нули ?

Какие есть варианты?
Мне пока приходит в голову вариант при котором все пустые строки имеют класс 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;

<!-- html файл --!>
<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. Интересуют все варианты, но выделите пожалуйста как следует делать и какие способы быстрее работают.
Таблица примерная, по факту таблица содержит сотни строк.
Заранее спасибо.

Answer 1

[display: block]

(function(table){
  var rows = table.getElementsByTagName('tr');
  for(var i = rows.length-1; i>=0; --i){
    var deleteRow = true;
    var cells = rows[i].getElementsByTagName('td');
    for(var j = cells.length-1; j>0; --j){
      if(cells[j].innerText !== '0'){
        deleteRow = false;
        break;
      }
    }

    if(deleteRow) rows[i].setAttribute('style', 'display:none');
  }
})(document.getElementsByTagName('table')[0]);

Comments

[Adrenal1ne1]

Спасибо. Вдруг кому нужны и другие решения, то смотрите здесь http://ru.stackoverflow.com/questions/613842/Как-с...