JQUERY - 隐藏基于细胞类

Question

我们目前正在开发一个客户的内部报告，我不能完全破解这一个...

我有一个HTML表变量表列下的所有表格单元格列标题数量以及可变数量的数据行。表中的每一个都被分配了一个'td-Red''td-Green'或'td-Gray'的类。这控制着单元格的颜色。

如果所有列的tds都有'td-Gray'类，我们想要隐藏包括标题在内的整个列。

我敢肯定，这可以用jQuery做，但我不这样做......

是任何人能帮助我们吗？

Answer 1

循环浏览标题，使用标题索引过滤每个列中也有灰色类别的数据单元格。与此相比，收集的长度占总行，并相应地隐藏

var $dataRows = $('#myTable tbody tr'), 
 
    rowCount = $dataRows.length; 
 
    
 

 
$('#myTable thead th').each(function(i){ 
 
    var $greyCells = $dataRows.find('td:eq(' + i + ').td-Grey'); 
 
    if($greyCells.length === rowCount){ 
 
     $greyCells.add(this).hide();  
 
     console.log('Hiding column index = ',i) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
<thead> 
 
    <tr> 
 
    <th>Heading 1</th> 
 
    <th>Heading 2</th> 
 
    <th>Heading 3</th> 
 
    <th>Heading 4</th> 
 
    <th>Heading 5</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td class="td-Grey">Col 1</td> 
 
    <td>Col 2</td> 
 
    <td>Col 3</td> 
 
    <td class="td-Grey">Col 4</td> 
 
    <td>Col 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="td-Grey">Col 1</td> 
 
    <td>Col 2</td> 
 
    <td>Col 3</td> 
 
    <td class="td-Grey">Col 4</td> 
 
    <td>Col 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="td-Grey">Col 1</td> 
 
    <td>Col 2</td> 
 
    <td>Col 3</td> 
 
    <td class="td-Grey">Col 4</td> 
 
    <td>Col 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="td-Grey">Col 1</td> 
 
    <td>Col 2</td> 
 
    <td>Col 3</td> 
 
    <td class="td-Grey">Col 4</td> 
 
    <td>Col 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="td-Grey">Col 1</td> 
 
    <td>Col 2</td> 
 
    <td>Col 3</td> 
 
    <td class="td-Grey">Col 4</td> 
 
    <td>Col 5</td> 
 
    </tr> 
 
</tbody> 
 
</table>