Jquery .Toggle() based on colgroup col id

Question

fiddle is here.

I am having trouble grabbing the actual column by the colgroup's col id to toggle it. I have the index correctly matched, but I do not understand how I can use the power of the colgroup to grab the entire column. Here is my current attempt (all the way at the bottom on the fiddle):

    //Column Button Hider
    $('fieldset.techtable input.column[type=checkbox]').on('change', function() {
        var index = $(this).prevAll('input.column').length+2;
        console.log(index);
        $('fieldset.techtable' #col'+index').toggle()
            //($('#col'+index).toggle());
    });

and here is the table and colgroup:

<section class="techtable">
        <h1>Technologies / Compliance / Certifications</h1>
        <table cellspacing="0">
            <colgroup>
                <col id="col0">
                <col id="col1">
                <col id="col2">
                <col id="col3">
                <col id="col4">
                <col id="col5">
                <col id="col6">
            </colgroup>
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Skill</th>
                    <th>Version(s)</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Elapsed Time</th>
                    <th>Expertise Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Technology</td>
                    <td>J2EE</td>
                    <td>1.5, 1.6, 1.7</td>
                    <td>November, 2011</td>
                    <td></td>
                    <td></td>
                    <td>2</td>
                </tr>
                </tr>...repeating...</tr>
            </tbody>
        </table>
    </section>

I want to try to utilize the power of the colgroup, but am unsure if I should use class ids (if so, where? on the col group id, the <th>? or each <td>?).

Are the <th>s interfering with the <colgroup>? maybe worded better, should I reference the th instead of trying to use colgroup?

A point in the right direction of syntax is helpful, and a line of code to help is always appreciated, but for this one, I am trying to avoid expanding this into more lines of code, unless im overlooking the methodology. I am under the assumption that I am not just grabbing the col id correctly, but you feedback could prove me wrong.

Answer 1

If you are trying to hide a particular column of data, hiding the col within the colgroup won't do it.

var colIndex = 0; // first column
$(myTable).find("td,th").filter(":nth-child(" + (colIndex+1) + ")").toggle();

I have modified this code to work with your table. Here's the updated fiddle

 var index = $(this).prevAll('input.column').length+2;
 $('colgroup').parent('table').find("td,th").filter(":nth-child(" + (index+1) + ")").toggle();  

Answer 2

Are you trying to do this?

$('fieldset.techtable #col' + index).toggle();

As the id is unique in the page, it normally is enough to just target that:

$('#col' + index).toggle();

Answer 3

Try the following:

$(".techtable td:nth-child("+index+1+")").toggle();

saw this on: Hide/Show Column in an HTML Table

Answer 4

I don't think you will be able to toggle visibility of a column because columns are more metadata/pseudo-elements than actual elements on the page (it is actually the Nth tr of each td you're trying to toggle) . I know there are issues when attempting to style them consistently for this very reason (see my answer here for explanation/investigation).