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

455

14 января 2017, 11:21

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

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

Answer 1

реализация в вопросе плывет, потому что делаешь

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

у строк таблицы нужно устанавливать display: table-row;

В качестве альтернативы пробеганию по нужным строкам в цикле и выставлении видимости вручную можно устанавливать класс контейнеру, например таблице, и в css указать, что находясь внутри этого класса элементы с классом zero будут иметь display:none.

В этом случае управление видимостью регулируется добавлением/удалением класса контейнеру

Пример:

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

Answer 2

display - Янус в CSS.
Для tr он table-row, поэтому Ваш код работает, только нужно правильно установить display обратно:

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

Answer 3

Что бы не плыло, можно вместо display изменять visibility:

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>

Answer 4

$('#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>

Немного костыльно, но рабоче.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Код html не проходит валидацию(div + label + input)

Вот такая вот штука(код ниже)Валидатор матерится, хотя визуально эффект получился :

387

$Что значит {% if not is_frame %} в html$

HTML

Что значит {% if not is_frame %} в html

Я начинающий программист и не могу самостоятельно найти ответ на вопрос:

357

HTML

Верстка интерактивной карты [требует правки]

Как верстается подобное?

362

HTML

Как отформатировать текст?

"Оформите предоплату на журнал" как сделать чтобы первые два слова были одного цвета и размера, а последнее другогоТолько не используя css (верстка...

400