ansaurus

Question

Answer 1

+3 A:

you could use colgroups:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

your script then could change just the desire <col> class.

Luis Melgratti 2009-01-18 21:52:20

I seem to remember colgroup not having cross browser support is that no longer true?

Brian Fisher 2009-01-18 22:03:37

Maybe. i'm using this method for hilight columns, (firefox, safari, chrome works fine) never tried it in IE.

Luis Melgratti 2009-01-18 22:12:09

@Brian - correct IE has issues with colgroups.

scunliffe 2009-01-19 00:48:28

@Brian - IE8 does not work and IE8 with IE7 enabled seems to be working.

Nordes 2010-08-23 07:43:27

Answer 2

+3 A:

The following should do it:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

This is untested code, but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name. You could of course limit the selectors with a class or an ID.

Eran Galperin 2009-01-18 21:57:03

Answer 3

+1 A:

The following is building on Eran's code, with a few minor changes. Tested it and it seems to work fine on Firefox 3, IE7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<table>
<thead>
    <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
    </tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
</body>
</html>

Paolo Bergantino 2009-01-18 22:15:35

Answer 4

+8 A:

I would like to do this without attaching a class to every td

Personally, I would go with the the class-on-each-td/th/col approach. Then you can switch columns on and off using a single write to className on the container, assuming style rules like:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

This is going to be faster than any JS loop approach; for really long tables it can make a significant difference to responsiveness.

If you can get away with not supporting IE6, you could use adjacency selectors to avoid having to add the class attributes to tds. Or alternatively, if your concern is making the markup cleaner, you could add them from JavaScript automatically in an initialisation step.

bobince 2009-01-19 14:16:12

Thanks for the advice, I had wanted to keep the HTML cleaner, but performance definitely became an issue as the table size approached 100 rows. This solution, provided a 2-5x performance improvement.

Brian Fisher 2009-01-23 07:04:26

Answer 5

A:

I have a related question. I have a large table, and have classes on the TD's I want to toggle. This works fine in IE8, FF, Chrome, etc. However in IE7 and IE6, the class switching on the table doesn't seem to take effect. If I go into the IE developer toolbar, and manually turn the CSS class off and on, it then works, but I have to do that each time.

I found one place suggesting to toggle the visibility and display properties of the table, which is why you'll see the table flash when you click Show 1.

Here is a test page I set up: http://www.athletic.net/Demo/Josh/Test/ClassSwitching.htm

Any ideas?

Brian, the styles and jquery will work for what you are wanting (that is, if you don't need IE6 and 7 - unless someone is aware of a solution).

Thanks!

jobow 2010-02-03 03:59:46

I'm not really sure what you are looking for here, but I'd suggest you ask a new question. People are more likely to provide answers to questions. Sorry I can't be of more help.

Brian Fisher 2010-02-04 07:10:19

Answer 6

A:

Sorry that I have to spam like this, but I cannot comment due to my rep.

Can someone please provide and example for the accepted answer. Thank you!

blank3 2010-04-09 05:23:38

Answer 7

A:

Hi

I hope the folowing site would help:

http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html

gabriel66 2010-05-18 13:22:42

Answer 8

A:

I implemented this solution using jQuery, and it worked perfectly for me:

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

Aaron 2010-07-06 17:23:24

ansaurus

tags:

views:

answers:

Hide/Show Column in an HTML Table

related questions