Question

I have a table (and couldn’t use because the header is offset by 1 when trying to hide the column) with each column having its own col id=””. I want to use jquery in the following code to select the columns within the table and toggle them off and on.

Here is the table :

<article class="technical">
                <div id="technical-container">
                    <h1><span id="technology">Technologies</span> / <span id="compliance">Compliance</span> / <span id="certification">Certification</span></h1>
                    <table id="tech-table" cellspacing="0">
                        <colgroup>
                            <col>
                            <col id="type" class="type">
                            <col id="name">
                            <col id="startdate">
                            <col id="currentenddate">
                            <col id="elapsed">
                            <col id="version">
                            <col id="rating">
                            <col id="project">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>type</td>
                                <td>Name</td>
                                <td>Start Date</td>
                                <td>Current/End Date</td>
                                <td>Elapsed</td>
                                <td>Version(s)</td>
                                <td>Personal Rating</td>
                                <td>Project</td>
                            </tr>
                            <tr>
                                <td>technology</td>
                                <td>J2EE</td>
                                <td>November, 2011</td>
                                <td><span id="current"></span></td>
                                <td>TODO</td>
                                <td>1.5, 1.6, 1.7</td>
                                <td>2</td>
                                <td>Contractor Optimization</td>
                            </tr>
                            <tr>
                                <td>technology</td>
                                <td>JS</td>
                                <td>April, 2012</td>
                                <td><span id="current"></span></td>
                                <td>TODO</td>
                                <td>?</td>
                                <td>1</td>
                                <td>Resume Builder</td>
                            </tr>
                            <tr>
                                <td>compliance</td>
                                <td>CIP</td>
                                <td>May, 2008</td>
                                <td>August, 2011</td>
                                <td>TODO, 3 years, 4 mos</td>
                                <td>n/a</td>
                                <td>2</td>
                                <td>Protection</td>
                            </tr>
                            <tr>
                                <td>certification</td>
                                <td>Red Cross</td>
                                <td>May, 2007</td>
                                <td>April, 2013</td>
                                <td>TODO, 6 years</td>
                                <td>n/a</td>
                                <td>3</td>
                                <td>Life Saving</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </article>

here are the buttons that get clicked to do the hiding:

<article>
                <header>
                    <h1>What</h1>
                    <div class="mydiv">
                        <p1>this sections involves what I work with</p1>
                    </div>
                </header>
                <section>
                    <div class="mydiv">
                        <span id="what1"><button type="button" class="button" id="clickTech">Technologies</button></span> <span id="what2"><button type="button" class="button" id="clickComp">Compliance</button></span> <span id="what3"><button type="button" class="button" id="clickCert">Certifications</button></span>
                        <!-- <input type="button" class="btn" value="Technologies" id="clickTech" / -->
                    </div>
                </section>
                <section>
                    <h3><span id="whatsel2"><button type="button" class="button-vert" id="clickStart">Start Date</button></span></h3>
                    <h3><span id="whatsel3"><button type="button" class="button-vert" id="clickEnd">Current/End Date</button></span></h3>
                    <h3><span id="whatsel4"><button type="button" class="button-vert" id="clickElapsed">Elapsed Time</button></span></h3>
                    <h3><span id="whatsel5"><button type="button" class="button-vert" id="clickVersion">Version(s)</button></span></h3>
                    <h3><span id="whatsel6"><button type="button" class="button-vert" id="clickRating">Personal Rating</button></span></h3>
                    <h3><span id="whatsel7"><button type="button" class="button-vert" id="clickProject">Project</button></span></h3>
                </section>
                <!-- <footer>
                    <h2>footer</h2>
                    <p>footer</p>
                </footer> -->
            </article>

here is the working selector for hiding the rows:

            var rowSelector = function (args) {
            $("#"+args.data.type).toggle();
            $("#tech-table tr").each(function(){
                if ($($(this).children()[0]).text()==args.data.type) {
                    $(this).toggle();
                }
            });
        };
        // $("#clickTech").click({type:"technology"},generalSelector);
        // assoc array is id:type
        var hiders = {"#clickTech":"technology", "#clickComp":"compliance", "#clickCert":"certification"};
        for (var id in hiders) {
            $(id).click({type:hiders[id]}, rowSelector);
        }

and this is what I have so far with the column selector, but need help with lines 3, 4, and 5:

            var colSelector = function (args) {
            $("#"+args.data.type).toggle();
            $("#tech-table col").each(function(){
                if  ($($(this)).text()==args.data.type) {
                    $(this).toggle();
                }
            });
        };
        // $("#clickTech").click({type:"technology"},generalSelector);
        // assoc array is id:type
        var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
    for (var id in hiders) {
        $(id).click({type:colHiders[id]}, colSelector);
    }

I appreciate your guidance and help.

Answer 1

Here’s a javascript answer for you though if you don’t want to use @jatrim’s css solution

     var colSelector = function (args) {
        var num = 0;
        var i = 0;
        $($("#tech-table tr")[0]).find('td').each(function(){
            if ($(this).text() == args.data.type)
                num=i;
            i++;
        });
        if (num!=0){
            $("#tech-table tr").each(function(){
                var tds = $(this).find('td');
                $(tds[num]).toggle();
            });
        }
    };
    // $("#clickTech").click({type:"technology"},generalSelector);
    // assoc array is id:type
    var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
    for (var id in colHiders) {
        $(id).click({type:colHiders[id]}, colSelector);
    }

Also the fiddle to test is here http://jsfiddle.net/ueKcL/