How to select col id using jquery to hide via css


Tags: javascript,jquery,css,col

Problem :

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.



Solution :

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/


    CSS Howto..

    How to add styles programmatically?

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    how to apply background transparency on a div (for an AJAX loading animation)?

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?

    How to make responsive video container div?

    How to to make a gap between rows in FlowPanel in Css in Gwt?

    How to Intercept a css get request [closed]

    How to fix this CSS 3 code to make it working properly on the server?

    How do I move the background image of a DIV based on the scrollbar movement?

    How to make image hover in css?

    How to change css for an element but keep defaults for it's children

    How do I bind data to a CSS property without using the style attribute of the element in Dart web-ui?

    How to apply CSS to a Mac Chrome Select Box?

    Bootstrap: How to apply certain CSS rules, when on different devices [duplicate]

    How to use add/subtract in css propert?

    How to write two CSS files: with and without sourcemap

    How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

    How to align element based on the other element that is above

    Does anybody know how I can adjust this CSS to achieve the desired hyperlink effect I'd like?

    CSS transform Scale translates the object, how to avoid this?

    How to put text in the upper right, or lower right corner of a “box” using css

    How to keep nav menu highlighted after click using js in sidebar

    How to replicate this table layout in HTML4/CSS2 (incl. vert-centered rows)

    How can I override CSS id?

    how to change style of element when click on anchor

    how to add border to image css on blogger

    why will my border not show?

    How to create a texture paper background using CSS without image

    How to disable google translator plug in and set margin-top: to 0px for body element?