?
Solved

html table column hide

Posted on 2014-08-08
2
Medium Priority
?
2,138 Views
Last Modified: 2014-08-08
Hi,

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!!!!!!!!!
0
Comment
Question by:joyacv2
2 Comments
 
LVL 16

Expert Comment

by:Joe
ID: 40248763
Hi, here's a JSFiddle you can look at that does exactly what you're looking for.

http://jsfiddle.net/vXBtP/5/
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 total points
ID: 40248767
Here's a quick solution without having to decorate every td with a colIdx class:
http://jsfiddle.net/AlexCode/ft6kL6tg/
<table id="myTable" width="100%" border="1">
    <thead>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <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>
        </tr>
        <tr>
            <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>
        </tr>
    </tbody>
</table>

<input id="chk1" type="checkbox" onchange="toggleColumn(1);" />
<label for="chk1">Toggle column 1</label>
<br/>
<input id="chk2" type="checkbox" onchange="toggleColumn(2);" />
<label for="chk2">Toggle column 2</label>
<br/>
<input id="chk3" type="checkbox" onchange="toggleColumn(3);" />
<label for="chk3">Toggle column 3</label>
<br/>
<input id="chk4" type="checkbox" onchange="toggleColumn(4);" />
<label for="chk4">Toggle column 4</label>
<br/>
<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){
        $($(item).find('td').get(colPos-1)).toggle();
    });
}

Open in new window

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

839 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