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
by Terry Young
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>
<button name="toggle" value="1">Toggle Col 1</button><br>
<button name="toggle" value="2">Toggle Col 2</button><br>
<button name="toggle" value="3">Toggle Col 3</button><br>
<button name="toggle" value="4">Toggle Col 4</button><br>
<button name="toggle" value="5">Toggle Col 5</button><br>
JavaScript
$(document).ready(function () {
var $table = $('#tbl');
(function scanTable($table, undefined) {
var $rows = $table.find('tr'),
$cells = $table.find('td');
$cells.data('colShift', 0);
// first scan increments the column shift value for each cell
$rows.each(function (i, row) {
var $row = $(row),
$cols = $row.find('td');
// first scan the table for rowspans and colspans
$cols.each(function (j, col) {
var $col = $(col);
iRowSpan = +$col.attr('rowspan') || 1;
if (iRowSpan > 1) {
var k = i,
$temp = $row;
while (k < i+iRowSpan-1) {
$temp = $temp.next();
console.info(j, $temp);
$temp
.find('td:eq(' + j + '), td:gt(' + j + ')')
.not(col)
.each(function (m, td) {
$(td).data().colShift++;
});
k++;
}
}
});
});
// Second scan assigned the nth-col value.
// This is not mean 'structurally which column it is'.
// This means 'visually which column it is'.
$rows.each(function (i, row) {
var $row = $(row),
$cols = $row.find('td');
$cols.each(function (j, col) {
var $col = $(col),
iShift = $col.data('colShift'),
index = $col.index();
$col.attr('data-nth-col', +index + 1 + iShift);
});
});
})($table);
$('button[name=toggle]').on('click', function () {
var n =...