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();