Find solution
How to make collapsible columns for a table?

Need to make columns in a table appear/disappear based on checkboxes

  • WebDesignFilter: I am trying to create a table with columns appearing based on what checkboxes are selected. I'm trying to create table, basically like a spec-sheet. What I want to do is to make the user be able select what items to compare. Essentially, the columns would appear based on what checkboxes are selected. I'm quite very comfortable with CSS and HTML but a JS newbie at this point so this took me a lot longer than I thought and I really didn't get anywhere. I would really appreciate a few pointers. I haven't seen any websites where they had that so maybe if anyone knows a site where they have that I can try checking out the code to see how it works. And I'd definitely appreciate if someone actually points me to a solution. Thanks a lot.

  • Answer:

    http://angel.net/~nic/mefi/table.html a simplified example.

the_dude at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

nicwolff

Tell us about this table. Does it already exist in your HTML, and you just want to hide some columns? Or are you creating the table on-the-fly, by drawing data from a database?

exphysicist345

I haven't tested this, but something like this could work: <input type="checkbox" id="show_one" /> <input type="checkbox" id="show_two" /> <input type="checkbox" id="show_three" /> <table> <tr> <td class="one"></td> <td class="two"></td> <td class="three"></td> </tr> </table> var toggle = function(){ var idParts = $(this).attr('id').split('_'); if($(this).val() == 'on'){ $('td.'+idParts[1]).show(); } else{ $('td.'+idParts[1]).hide(); } } $('input[type=checkbox]).click(toggle); //will evaluate checkedness on click $('input[type=checkbox]).each(toggle); //will evaluate inital state of checkedness

the jam

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.