collapse table col

by edwardsharp

HTML

<table id="tableone" border="1">
    <thead>
        <tr>
            <th>0</th>
            <th>1</th>
            <th>2</th>
        </tr>
    </thead>
    <tody>
    <tr class="del">
        <td>Row 0 Column 0</td>
        <td >Row 0 Column 1</td>
        <td >Row 0 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 1 Column 0</td>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 3 Column 0</td>
        <td>Row 3 Column 1</td>
        <td>Row 3 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 4 Column 0</td>
        <td>Row 4 Column 1</td>
        <td>Row 4 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 5 Column 0</td>
        <td>Row 5 Column 1</td>
        <td>Row 5 Column 2</td>
    </tr>
    </tbody>
    
</table>
    <input id="btnHide" type="button" value="Hide Column 2"/>


</html>

JavaScript

$(document).ready(function() {
    $('thead tr th').click(function() {
        var index = $(this).index() + 1;
        $("td:nth-child(" + index + ")").toggle();
        //$('td:nth-child(2),th:nth-child(2)').hide();
    });
});