Jquery：仅当所有表列的值都"NA"时才隐藏其所有表列

Question

例如。

col1    col2    col3    col4    col5   col6  
1        pass   NA      Pass    NA     NA  
2        pass   NA      pass    NA     pass  
3        fail   NA      pass    NA     NA  

然后隐藏 col3 和 col5。结果表如下：

col1    col2    col4      
1        pass   Pass      
2        pass   pass      
3        fail   pass    

Col3 和 Col5 现在被隐藏了。

注意：我正在通过ajax填充所有行。对于每一行，都会触发 ajax。

这是我现有的代码：

function hideOneValueColumns(table_id, ignore_row_class, ignore_column_class) {
    var row_count = $('#' + table_id + ' tr:not(.' + ignore_row_class + ')').length;
    if (row_count > 2) {
        //first go through the column headers
        $('#' + table_id + ' th').each(function (i) {
            //only process the column if it isn't one of the column we should ignore
            if (!$(this).hasClass(ignore_column_class)) {
                //get all cells of the columns (in order to show or hide them)
                var all_cells = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')');
                //get the cells we'll use to decide whether we want to filter the column or not
                var filtered_cells = $(this).parents('table').find('tr:not(.' + ignore_row_class + ') td:nth-child(' + (i + 1) + ')');
                //array containing the list of different values in a column
                var values = new Array();
                //gather the different cell values
                filtered_cells.each(function () {
                    var value = this.innerHTML;
                 // gather all cells which has values NA
                    if (values == 'NA') {
                        values.push(value);
                    }
                });
                //hide if less than 2 different values and show if at least 2 different values
                if (values.length == $('#' + table_id + ' tr').length) {
                    $(this).hide();
                    all_cells.hide();
                } else {
                    $(this).show();
                    all_cells.show();
                }
            }
        });
    } else {
        $('#' + table_id + ' th').show();
        $('#' + table_id + ' tr td').show();
    }
}
// call the method
// spcl is table id
hideOneValueColumns('spcl', 'filters', 'no-hide');

Answer 1

您需要遍历每个表格行，并针对每一列计算单元格是否包含"NA"。如果没有，则保留整个列。

在此代码片段中，我从第一行获取列数(假设它们是行标题(。然后，对于每列数，对于每一行，获取该列。我在这里完成的默认功能是hide列。如果列中的任何单元格不包含 NA ，则show该列。

"use strict";
function hideOneValueColumns(table_id) {
  var columnCount = jQuery('#'+table_id+' tr:first-of-type th').length + 1;
  for(var i = 1; i < columnCount; i++) {
    var func = 'hide';
    jQuery('tr:not(:first-of-type)').each(function(){
      var $td = jQuery(this).find('td:nth-child('+i+')');
      if($td.text() != 'NA') {
        func = 'show';
      }
    });
    jQuery('tr td:nth-child('+i+'), tr th:nth-child('+i+')')[func]();
  }
}
hideOneValueColumns('some_id');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="some_id">
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
    <th>col4</th>
    <th>col5</th>
    <th>col6</th>
  </tr>
  <tr><td>1</td><td>pass</td><td>NA</td><td>Pass</td><td>NA</td><td>NA</td></tr>
  <tr><td>2</td><td>pass</td><td>NA</td><td>pass</td><td>NA</td><td>Pass</td></tr>
  <tr><td>3</td><td>fail</td><td>NA</td><td>pass</td><td>NA</td><td>NA</td></tr>
</table>