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>