Stackoverflow Response: jquery- hide columns in table where there are rowspans

http://stackoverflow.com/questions/16156305/jquery-hide-columns-in-table-where-there-are-rowspans/16158187#16158187

HTML

<table id="tbl" border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan=5>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td rowspan=2>3</td>
        <td>4</td>
        <td rowspan=3>5</td>
    </tr>
    <tr>
        <td rowspan=6>2</td>
        <td>4</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td rowspan=5>1</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td rowspan=3>5</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

<input type="radio" name="toggle" value="1">Toggle Col 1<br>
<input type="radio" name="toggle" value="2">Toggle Col 2<br>
<input type="radio" name="toggle" value="3">Toggle Col 3<br>
<input type="radio" name="toggle" value="4">Toggle Col 4<br>
<input type="radio" name="toggle" value="5">Toggle Col 5<br>

JavaScript

//
// CAUTION: This approach is based on the assumption 
// that *NO* colspans are involved.
//
// There are so many possible purmutations of rowspans,
// it makes it difficult to identify which cell belongs
// to which "visually perceived" nth-column.
//
// But isn't this exactly what we want?
// i.e. to toggle the cells that are "visually perceived" as
// the nth-column?
//
// Hence, by completely bypassing calculations of rowspans,
// and for the fact that tables are perfect grids,
// all wee need is to identify the cells that match the same
// offset left, then those cells certainly belong to the same
// so-called "nth-column"

$(document).ready(function () {
    
    var $table = $('#tbl');
    
    (function scanTable($table) {
        
        var $rows = $table.find('tr'),
            $cells = $table.find('td'),
            map = {};
        
        // the first row will always have all n columns of cells,
        // so this is the safest row to collect each columns offset().left
        $rows.first().find('td').each(function (i, cell) {
            var $cell = $(cell),
                left = Math.floor($cell.offset().left);
            map[left] = i+1;
            $cell.attr({
                'data-nth-col': i+1
            });
        });
        
        $rows.not(':first').each(function (i, row) {
            var $row = $(row),
                $cells = $row.find('td');
            
            $cells.each(function (j, cell) {
                var $cell = $(cell),
                    left = Math.floor($cell.offset().left);
                $cell.attr({
                    'data-nth-col': map[left]
                });
            });
        });
    })($table);
    
    
    $('input[name=toggle]').on('click', function () {
        var n = +$(this).val();
        $table.find('td[data-nth-col='+n+']').toggle();
    });
    
});