隐藏仅包含零的 HTML 行(给定一组可见列）

Hide HTML rows containing only zeros (given a set of visible columns)

本文关键字：一组 包含零 HTML 隐藏      更新时间：2023-09-26

我有一个只包含 1 和 0 的表，除了第一行和第一列，它们是标签。 该表如下所示：

        Apple   Orange   Pear
Farmer1   1       1       1
Farmer2   0       1       1
Farmer3   0       1       0

该表是从包含 1 和 0 的巨大 csv 文件中提取的。 （在实际用例中，大约有 900 行，可能多达 20 列。 我的目标是允许用户选择要显示的列（即，哪些水果），并且给定选定的（可见）列，仅显示至少包含一个"1"的行。

因此，如果用户希望隐藏"橙色"，则生成的表将显示如下：

        Apple   Pear
Farmer1   1      1
Farmer2   0      1

到目前为止---而且我在 Web 编程方面非常缺乏经验---我已经从这里集成了代码，以便用户可以选择哪些列可见。 但是，我不知道如何在可见列中隐藏只有 0 的行。

您可以在此处看到我的部分解决方案（即，仅使列可见）：

现场演示

仅供参考，我没有与上面显示的隐藏列的方法结婚。 如果使用不同的方法以便更轻松地隐藏可见列中只有 0 的行更有意义，我全力以赴！

更新：多亏了@InandaMenezes我有以下进一步改进的解决方案：jsfiddle

$('input:checkbox').click(function(){
  var checked = $(this).is(':checked'),
      cname = 't'+this.name;
  if(checked){
    $.when($('td[name="'+cname+'"]').fadeIn()).done(restoreRows);
  }
  else{
    $.when($('td[name="'+cname+'"]').fadeOut()).done(hideRows); 
  }
});
function hideRows(){
  $('table tr:visible').each(function(){
    var zeros = i = 0;
    $(this).find('td:visible').not('#tcol1').each(function(){
      i++;
      if($(this).text() == 0)
        zeros++;
    });
    if(zeros && (zeros == i))
      $(this).fadeOut('row');
  });
}
function restoreRows(){
  $('table tr:hidden').each(function(){
    var zeros = i = 0;
    $(this).find('td').not('#tcol1').each(function(){
      if($(this).css('display') != 'none'){
        i++;
        if($(this).text() == 0)
          zeros++;
      }
    });
    if(zeros != i)
      $(this).fadeIn('row');
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="tcol" onsubmit="return false">
  <b>Features:</b><br>
  <input type=checkbox name="col2" checked> apple<br>
  <input type=checkbox name="col3" checked> orange<br>
  <input type=checkbox name="col4" checked> pear<br>
</form>
<p></p>
<table border=1>
  <tr>
    <td name="tcol1" id="tcol1" class="bold">Farmer1</td>
    <td name="tcol2" id="tcol2">1</td>
    <td name="tcol3" id="tcol3" class="italic">1</td>
    <td name="tcol4" id="tcol4">1</td>
  </tr>
  <tr>
    <td name="tcol1" id="tcol1" class="bold">Farmer2</td>
    <td name="tcol2" id="tcol2">0</td>
    <td name="tcol3" id="tcol3" class="italic">1</td>
    <td name="tcol4" id="tcol4">1</td>
  </tr>
  <tr>
    <td name="tcol1" id="tcol1" class="bold">Farmer3</td>
    <td name="tcol2" id="tcol2">0</td>
    <td name="tcol3" id="tcol3" class="italic">1</td>
    <td name="tcol4" id="tcol4">0</td>
  </tr>
</table>

JSFiddle： http://jsfiddle.net/ffLLe5mw/10/

脚本： 

$( document ).ready(function() {
$( ":checkbox" ).click(function() {
        if ($(this).is(':checked')) {
            showColumn(this.name);
            showOrHideRows();
        } else {       
            hideColumn(this.name);
            showOrHideRows();
        }
    });
});    
function hideColumn(columnIndex) {
    $('table td:nth-child('+(columnIndex)+')').hide();
}
function showColumn(columnIndex) {
    $('table td:nth-child('+(columnIndex)+')').show();
}
function showOrHideRows() {
   $("table tr:not(:first-child)").show();
    $("table tr:not(:first-child)").each(function() {
        var validColumns=$("td:visible:not(:first-child)", this).filter(function() {
    return $(this).text() == 1;
  }).length;
        $(this).toggle(validColumns!=0);
})
}

.HTML：

        <form name="tcol" onsubmit="return false">
        <b>Features:</b>
        <input type="checkbox" name="2"  checked=""/> apple
        <input type="checkbox" name="3"  checked=""/> orange
        <input type="checkbox" name="4"  checked=""/> pear
        </form>
            <table border="1">
        <tbody>
    <tr> <td id="tcol1">Farmer #</td> 
<td id="tcol2">apple</td> 
<td id="tcol3">orange</td> 
<td id="tcol4">pear</td> </tr>
    <tr>
        <td name="tcol1" id="tcol1" class="bold">Farmer1</td>
        <td name="tcol2" id="tcol2">1</td>
        <td name="tcol3" id="tcol3" class="italic">1</td>
        <td name="tcol4" id="tcol4">1</td>
        </tr>
        <tr>
          <td name="tcol1" id="tcol1" class="bold">Farmer2</td>
        <td name="tcol2" id="tcol2">0</td>
        <td name="tcol3" id="tcol3" class="italic">1</td>
        <td name="tcol4" id="tcol4">1</td>
        </tr>
        <tr>
        <td name="tcol1" id="tcol1" class="bold">Farmer3</td>
        <td name="tcol2" id="tcol2">0</td>
        <td name="tcol3" id="tcol3" class="italic">1</td>
        <td name="tcol4" id="tcol4">0</td>
        </tr>
        </tbody></table>
嗨，

请检查下面的代码，它可能会对您有所帮助

小提琴

Check Above link

另一种解决方案。对当前函数稍作修改。基本上，当我们对每行的单元格值求和并在值为 0 时隐藏它们时。

function toggleVis(btn){
    var btn   = document.forms['tcol'].elements[btn],
        cells = document.getElementsByName('t'+btn.name),
        nbCols = document.getElementById("myTable").rows[0].cells.length,
        i, j, 
        v, val,
        table, row, col;
    mode = btn.checked ? showMode : 'none';
    // Apply the style to the CSS display property for the cells
    for(j = 0; j < cells.length; j++) 
        cells[j].style.display = mode;
    table = document.getElementById("myTable");
    for (i = 0, row; row = table.rows[i]; i += 1) {
        //iterate through rows 
        // we'll sum every cell's value on the row
        //if the sum is null, we'll hide the row
        val = 0;
        // then iterate through columns on this row
        for (j = 1, col; col = row.cells[j]; j++) { 
            // we don't want to count the value that are already hidden
            if ( col.style.display === 'none') {
                continue;
            }
            // don't forget the radix on parseInt ;-)
            // we sum the value
            v = parseInt(col.innerHTML, 10);
            if (!isNaN(v)) {
                val += v;
            }
        } 
        if( val === 0) { 
            row.style.display = 'none';
        } else { 
            if (row.style.display === 'none') {
                row.style.display = '';
        }
    }
}

这是一个JSFIDDLE供您玩

相关文章：