1

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

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

4
  • плывет потому что делаешь rows[i].style.display = 'block'; у строк таблицы нужно устанавливать display: table-row;
    – Grundy
    12 янв 2017 в 13:01
  • а как задается класс zero?
    – C.Raf.T
    12 янв 2017 в 13:03
  • Отправляю Json на страницу и при разборе json на странице, если все ячейки нули, то присваиваю класс zero.
    – Adrenal1ne
    12 янв 2017 в 13:07
  • Grundy, спасибо - работает.
    – Adrenal1ne
    12 янв 2017 в 13:09

5 ответов 5

3

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

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>

6
  • Определённо лучше. Но насколько будет выигрыш?
    – user207618
    12 янв 2017 в 13:13
  • @Other, в теории браузер может оптимизировать применение стиля и применять его быстрее чем ты пробежишь по элементам в яваскрипте. Но не думаю что различие будет заметно даже при тысяче строк
    – Grundy
    12 янв 2017 в 13:14
  • Да, скорости нынче не чета эры перфокарт. Но будет ли оптимизация в смысле отображения? Вроде новомодных штучек типа GPU для рендера.
    – user207618
    12 янв 2017 в 13:18
  • @Other, Не понял на счет оптимизации в смысле отображения
    – Grundy
    12 янв 2017 в 13:19
  • В любом случае перерисовывать будет CSS, но будет ли заметно из-за постепенного изменения свойств или вид ждёт конца цикла? Т. е. может быть так, что браузер умён и не дёргает перерисовку до конца цикла (вроде с DOM есть подобные оптимизации).
    – user207618
    12 янв 2017 в 13:22
3

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>

11
  • Всё равно есть смещение, если приглядеться
    – Yuri
    12 янв 2017 в 13:07
  • @Yuri, потому что ширина ячеек по содержимому растягивается, а в вопрос полностью вид изменялся
    – Grundy
    12 янв 2017 в 13:08
  • Где? И как? Chrome выдаёт Perfect Pixel.
    – user207618
    12 янв 2017 в 13:08
  • Other, Grundy, спасибо, этот способ работает.А есть другие способы решить данную задачу ? P.S.Array.from(document.querySelectorAll('.zero')).forEach(e => { e.style.display = this.checked ? 'none' : 'table-row'; }); очень похоже на лямбду в Java.
    – Adrenal1ne
    12 янв 2017 в 13:11
  • @Adrenal1ne, куча, но чем тебя не устраивает тот который уже работает?
    – Grundy
    12 янв 2017 в 13:12
0

Что бы не плыло, можно вместо 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>

2
  • 1
    слишком много пустых строк тогда
    – Grundy
    12 янв 2017 в 13:05
  • Странное решение. Правда.
    – user207618
    12 янв 2017 в 13:05
0

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

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

6
  • JQuery мне еще рано, но спасибо :)
    – Adrenal1ne
    12 янв 2017 в 13:17
  • @Adrenal1ne, скорее уже поздно. jQuery морально своё изжил.
    – user207618
    12 янв 2017 в 13:19
  • @Adrenal1ne, ну тут де-факто, только названия функций с JQuery - переменить на нативный JS, все тоже самое, ток выглядит несколько иначе, короче. Впрочем, я думаю, интуитивно понятно, что что делает.
    – SLy_huh
    12 янв 2017 в 13:20
  • @SLy_huh, у автора нулевые строки уже отмечены классом
    – Grundy
    12 янв 2017 в 13:20
  • @Grundy ну вопрос был Как можно по чекбоксу спрятать все строки таблицы, колонки которой содержат одни нули ?. Решение с классами- авторское, и судя по всему, экспериментальное. Думаю, если предложить что-то более универсальное в использовании, хуже не будет.
    – SLy_huh
    12 янв 2017 в 13:22
0

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>

1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 5 апр 2022 в 23:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.