I am looking for a way to dynamically hide/show table columns based on their classes, without having to add classes to each individual <td> element.
- This should be accomplished using classes on the columns themselves.
Here is a sample of the table structure:
<table id="huge-table" border="1">
<caption>A huge table</caption>
<colgroup>
<col class="table-0">
<col class="table-0">
<col class="table-1">
<col class="table-1">
</colgroup>
<thead>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
<td>2,4</td>
</tr>
</tbody>
</table>
Simply using $(".table-1").hide() does not achieve the desired result. Therefore, I would like to find column indexes by class and use the nth-child selector in jQuery:
indexes = getColumnIndexesByClass("table-1");
for ( var i=0; i<indexes.length; i++ ) {
$('#huge-table td:nth-child(indexes[i])').hide();
}
If anyone has suggestions on how to implement the getColumnIndexesByClass function or any alternative solution, please let me know.
EDIT
It's important to note that the size of the table is unknown beforehand and only the classes are provided for reference.