JQUERY - alle Tabellenzellen unterhalb Tabellenspalten ausblenden basierend auf Zellklasse

Question

wir derzeit einen internen Bericht für einen Kunden entwickeln und ich kann durchaus nicht diesen knacken ...

Ich habe eine HTML-Tabelle mit einem variablen Anzahl der Spaltenüberschriften und dann eine variable Anzahl von Datenzeilen. Jedem in der Tabelle ist eine Klasse von entweder 'td-Red' 'td-Green' oder 'td-Grey' zugewiesen. Dies steuert die Farbe der Zelle.

Wenn alle Tds einer Spalte die Klasse 'td-Gray' haben, möchten wir die gesamte Spalte einschließlich der Kopfzeile ausblenden.

Ich bin sicher, dass dies mit jQuery getan werden kann, aber ich bin nicht zu tun ...

Ist jemand in der Lage zu helfen?

Answer 1

Durchlaufen Sie die Überschriften, verwenden Sie den Überschriftenindex, um Datenzellen in jeder Spalte zu filtern, die auch die graue Klasse haben. Vergleichen Länge dieser Sammlung zu insgesamt Zeilen und verstecken entsprechend

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>