Question

除了第一行和第一列（标签）之外，我有一个仅包含1和0的表格。该表如下所示：

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

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

因此，如果用户希望隐藏＆＃34; Orange＆＃34;，结果表显示如下：

        Apple   Pear
Farmer1   1      1
Farmer2   0      1

到目前为止 - 我对网络编程缺乏经验 - 我已经整合了here的代码，以便用户可以选择哪些列可见。但是，我无法弄清楚如何在可见列中隐藏只有0的行。

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

Live Demo

仅供参考，我没有嫁给上面隐藏列的方法。如果使用不同的方法更有意义，以便更容易隐藏在可见列中只有0的行，我全都是为了它！

更新：感谢@InandaMenezes我有以下进一步改进的解决方案：jsfiddle

Answer 1

＆＃13;

$('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');
  });
}

＆＃13;

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

＆＃13;

Answer 2

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

JsFiddle

Check Above link

Answer 3

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>

Answer 4

另一种解决方案。对您当前的功能稍作修改。基本上，当我们将每个行的单元格值相加时，如果值为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供您玩

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

4 个答案: