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.

Where is `fieldset.techtable`? All I see is `section.techtable` — Kevin B, Jun 11 '12 at 19:39
Are you trying to hide an entire table column by hiding the col within colgroup? I wasn't able to make that actually do anything in a fiddle. http://jsfiddle.net/HvGLu/ As far as your question about `th`, hiding a `th` will not hide it's corresponding `td`'s, they each have to be hidden separately. — Kevin B, Jun 11 '12 at 19:49

score 3 · Accepted Answer · edited Jun 11 '12 at 20:22

3

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

edited Jun 11 '12 at 20:22

wirey00

33,517
7
54
65

answered Jun 11 '12 at 20:06

Kevin B

94,570
16
163
180

Thank you for the information that colgroup won't hide it. I think that is why I've been banging my head for over 2 hours. Thank you greatly for helping a very Jr. Dev. – chris Frisina Jun 11 '12 at 20:50

score 1 · Answer 2 · answered Jun 11 '12 at 19:39

1

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

answered Jun 11 '12 at 19:39

Guffa

687,336
108
737
1,005

yes, it is not working, although your line has an additional pair of single quotes than mine. – chris Frisina Jun 11 '12 at 19:42
@chrisFrisina: Actually I removed a pair of apostophes. – Guffa Jun 11 '12 at 19:45
oops, my mistake, referenced each other's wrong. the second example correctly selects the correct colgroup, but nothing happens. can the .toggle() be applied to the colgroup? – chris Frisina Jun 11 '12 at 19:50
@chrisFrisina: Probably not. The colgroup isn't even a visual element. My experience is that it doesn't work very well to hide parts of a table anyway. – Guffa Jun 11 '12 at 19:53

score 1 · Answer 3 · edited May 23 '17 at 10:24

1

Try the following:

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

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

edited May 23 '17 at 10:24

Community

1
1

answered Jun 11 '12 at 20:08

Michael

2,973
1
27
67

score 0 · Answer 4 · edited May 23 '17 at 11:55

0

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).

edited May 23 '17 at 11:55

Community

1
1

answered Jun 11 '12 at 20:10

WickyNilliams

5,218
2
31
43

Jquery .Toggle() based on colgroup col id

4 Answers4