主页 / 问题 / 613842
Accepted
Adrenal1ne
Asked:2020-01-12 20:52:56 +0000 UTC2020-01-12 20:52:56 +0000 UTC

如何隐藏所有包含空值的表行？

  • 772

下午好！
如何使用复选框隐藏表格的所有行，其中的列仅包含零？

到目前为止，我想到了一个选项，其中所有空行都有一个类< 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。

PS 对所有选项都感兴趣，但请强调如何做以及哪些方法工作得更快。
该表是近似值，实际上该表包含数百行。
提前致谢。

javascript

5 个回答

  1. display- CSS 中的 Janus。
    对于trhe 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>

    • 3
  2. Best Answer

    问题中的实现是浮动的，因为你正在做

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

    应设置表行display: table-row;

    作为在循环中遍历所需行并手动设置可见性的替代方法，您可以为容器（例如表）设置一个类，并在 css 中指定此类中类为零的元素将具有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>

    • 3

  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>

    • 0 

  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>

    有点拐杖，但工作。

    • 0 

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

    • 0

相关问题