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

Question

我有一个只包含 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

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

您可以在此处查看我的部分解决方案(即，仅使列可见):

Live Demo

---

仅供引用，我不喜欢上面显示的隐藏列的方法。如果使用不同的方法更容易隐藏可见列中只有 0 的行更有意义，我完全赞成!

---

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

Answer 1

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