html table column hide

Posted on 2014-08-08
Last Modified: 2014-08-08

I have a html table with 5 columns and a header column for each column. I want to use 5 checkboxes to hide/unhide columns using jquery, javascript or css, any idea?

the best efficient method that you can suggest, thank you!!!!!!!!!
Question by:joyacv2
    LVL 16

    Expert Comment

    Hi, here's a JSFiddle you can look at that does exactly what you're looking for.
    LVL 30

    Accepted Solution

    Here's a quick solution without having to decorate every td with a colIdx class:
    <table id="myTable" width="100%" border="1">
                <td>Column 1</td>
                <td>Column 2</td>
                <td>Column 3</td>
                <td>Column 4</td>
                <td>Column 5</td>
                <td>Value 1.1</td>
                <td>Value 1.2</td>
                <td>Value 1.3</td>
                <td>Value 1.4</td>
                <td>Value 1.5</td>
                <td>Value 2.1</td>
                <td>Value 2.2</td>
                <td>Value 2.3</td>
                <td>Value 2.4</td>
                <td>Value 2.5</td>
    <input id="chk1" type="checkbox" onchange="toggleColumn(1);" />
    <label for="chk1">Toggle column 1</label>
    <input id="chk2" type="checkbox" onchange="toggleColumn(2);" />
    <label for="chk2">Toggle column 2</label>
    <input id="chk3" type="checkbox" onchange="toggleColumn(3);" />
    <label for="chk3">Toggle column 3</label>
    <input id="chk4" type="checkbox" onchange="toggleColumn(4);" />
    <label for="chk4">Toggle column 4</label>
    <input id="chk5" type="checkbox" onchange="toggleColumn(5);" />
    <label for="chk5">Toggle column 5</label>

    Open in new window

    function toggleColumn(colPos){
        $('#myTable tr').each(function(idx,item){

    Open in new window


    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now