Demo for an SO answer
SO answer: http://stackoverflow.com/questions/12455699/show-hide-table-column-with-colspan-using-jquery
by kamiolaz
HTML
<div>
<br/>
<input type="submit" value="Hide Associate" />
<input type="submit" value="Show Associate" />
<br/>
<table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdTransactions"
style="border-collapse: collapse;">
<tr>
<th scope="col">
</th>
<th colspan='4' class='tableColGroupAssociate'>
Associate Info
</th>
<th colspan='5' class='tableColGroupTransaction'>
Financial Info
</th>
</tr>
<tr class=''>
<th>
Line #
</th>
<th scope="col">
EmpID
</th>
<th scope="col">
SID
</th>
<th scope="col">
First Name
</th>
<th scope="col">
Last Name
</th>
<th scope="col">
Type
</th>
<th scope="col">
App ID
</th>
<th scope="col">
Batch ID
</th>
<th scope="col">
Correlation ID
</th>
<th scope="col">
Transaction ID
</th>
</tr>
<tr>
<td>
1
</td>
<td>
123
</td>
<td>
1234
</td>
<td>
Sandy
</td>
<td>
Taylor
</td>
<td>
P Adj
</td>
<td>
1
</td>
<td>
<a id="detailContentPlaceholder_grdTransactions_HyperLink1_0" onclick="setBatchTransactionValue();">
1</a>
</td>
<td>
1
</td>
...
CSS
td
{
margin: 0 10px 0 10px;
border: 1px solid blue;
}
th
{
margin: 0 10px 0 10px;
border: 1px solid blue;
font: bold 12pt Arail;
}
JavaScript
$("input").on("click", function(e){
e.preventDefault();
var label = $(".resultGridTable .tableColGroupAssociate"),
colspan = parseInt(label.attr("colspan"), 10),
associate = $("tr:gt(0)")
.find("th:gt(0):lt("+ colspan +"), td:gt(0):lt("+ colspan +")")
.add(label);
if($(this).val() == 'Hide Associate') associate.hide();
else associate.show();
});