Demo for an SO answer

SO answer: http://stackoverflow.com/questions/12455699/show-hide-table-column-with-colspan-using-jquery

by Lijo

HTML

<div>

    
    <table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdTransactions"
        style="border-collapse: collapse;">
        <tr>
            <th scope="col">
                &nbsp;
            </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&#160;Name
            </th>
            <th scope="col">
                Last&#160;Name
            </th>
            <th scope="col">
                Type
            </th>
            <th scope="col">
                App ID
            </th>
            <th scope="col">
                Batch ID
            </th>
            <th scope="col">
                Correlation&#160;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>
            <td>
                1
            </td>
        </tr>
        <tr style="background-color: #EAF1DD;">
            <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

//INDEX
alert ( GetNonColSpanIndex ('Type'));

function GetNonColSpanIndex(referenceHeaderCellValue) {
 
        var selectedCell = $("th").filter(function (i) {
            return ($.trim($(this).html()  )) == referenceHeaderCellValue;
 
        });
 
        alert(selectedCell.html());
 
        var allCells = $(selectedCell).parent('tr').children();
        var normalIndex = allCells.index($(selectedCell));
        var nonColSpanIndex = 0;
 
        allCells.each(
        function (i, item) {
            if (i == normalIndex)
                return false;
 
            var colspan = $(selectedCell).attr('colspan');
            colspan = colspan ? parseInt(colspan) : 1;
            nonColSpanIndex += colspan;
        }
        );
 
        return nonColSpanIndex;
    };