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

November 27, 2008 10:44 AM

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.

posted by the_dude to Computers & Internet (4 answers total)

Don't try this from scratch; use the jQuery Javascript library.
posted by nicwolff at 11:11 AM on November 27, 2008

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?
posted by exphysicist345 at 11:42 AM on November 27, 2008

Best answer: Here's a simplified example.
posted by nicwolff at 11:44 AM on November 27, 2008

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
posted by the jam at 11:50 AM on November 27, 2008