Tengo el siguiente código, el cuál oculta columnas de manera dinamica. El problema es que estoy tratando de agregar un colspan para la primera columna, misma que contiene 2 columnas. Si oculto la primera, solo se oculta la primera que esta dentro de ella y no la segunda en conjunto, descuadrando mi tabla.. ¿Alguien me puede echar una mano por favor? gracias.
$(document).on("click", "[data-column]", function () {
var button = $(this),
header = $(button.data("column")),
table = header.closest("table"),
index = header.index() + 1, // convert to CSS's 1-based indexing
selector = "tbody tr td:nth-child(" + index + ")",
column = table.find(selector).add(header);
column.toggleClass("hidden");
});
.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th id="column-a" colspan="2">Step 1</th>
<th id="column-b" colspan="1">Step 2</th>
<th id="column-c" colspan="1">Step 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Of step 1</td>
<td>Of step 1</td>
<td>Of step 2</td>
<td>Of step 3</td>
</tr>
<tr>
<td>Of step 1</td>
<td>Of step 1</td>
<td>Of step 2</td>
<td>Of step 3</td>
</tr>
</tbody>
</table>
<button type="button" data-column="#column-a">Hide/show 1st</button>
<button type="button" data-column="#column-b">Hide/show 3rd</button>
<button type="button" data-column="#column-c">Hide/show last</button>