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 float all child divs to center inside a parent div?

    How to convert UPPERCASE text to Title Case using CSS

    How to connect CSS files to my JSP pages stored in Web-Content (Dynamic Web Project)

    How To Apply jQuery CSS Selector

    CSS sliding-window rounded-corner buttons: how to avoid the “dead” area on right side of “window”?

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    Can't figure out how to make a box with multiple images with CSS/HTML

    How to create desired shapes and position them accordingly using CSS, CSS3?

    Showing horizontal-scrollbar while setting width: 100%

    how to animate a text in javafx using css?

    How to size a div box in CSS so text is centered regardless of length

    CSS - How can I set the content to attr() but when attribute isn't available, set it to 0 or another?

    How to include child div into parent div automatically?

    jQuery addClass based on how far scrolled

    How to display thumbnail in dropdown CSS list along with other styling of text

    how to select css class attributes from mootools,getStyle()?

    how to give conditional comments in firefox for a single css style statement

    How to add css to a HTML div which has no class or id

    How to make text invisable during hover stage

    Jquery/CSS - how to clear a CSS-background set in another file I can't edit

    CSS: How to decrease the margin of my paragraphs inside a div?

    How to remove Left property when position: absolute?

    How to place a div at top center position of a page using css…?

    How to make some controls visible and overlapping a DIV when mouse hovers on it? [closed]

    How to customize post excerpt css

    How to get a div positioned at the bottom of a table

    How to fix the Wordpress (Twenty Eleven) CSS Menu Alignment?

    How to let users have the latest non cached code?

    How do I remove all of the borders from an HTML ? [closed]
    Bootstrap is adding a top border to all td elements in .table containers. Adding ! important to your no-borders rule will override that: td { border: none !important; } ...
    Read more

    How to line up a css ::before pseudo element like a grid