Just listen to Alex

August 23, 2008

Adding hideable columns to plain HTML Tables using Prototype

Filed under: programming — Tags: — bosmeeuw @ 1:17 pm

I present to you a bit of Javascript code which enables users to change which columns should be visible or hidden in plain HTML tables. It is built using Prototype 1.6.

Click here to see a simple demo. You can grab the javascript code and default style from the demo page.

You enable the behaviour like this:

new AdjustableTableFields($('your-table-id'));

Note that the demo page enables the behaviour by table class name (in a ‘dom:loaded’ event handler).

There’s a few options for you to enjoy:

Add an attribute named “cookie-name” to your table element to have the browser remember the selected columns:

<table class="adjustable-table" cookie-name="demo">

Add an attribute named “unhidable” to the right th element to ensure the user cannot hide a certain column:

<th unhidable="true">ID</th>

Add an attribute named “display-name” to the right th element to use a different name on the checkbox than the TH content:

<th display-name="Fav. Dict.">Favorite Dictator</th>

That’s all there is to it, have fun!


1 Comment »

  1. My partner and I absolutely love your blog and find many
    of your post’s to be precisely what I’m looking for.
    Would you offer guest writers to write content to suit your needs?
    I wouldn’t mind producing a post or elaborating on a few of the
    subjects you write regarding here. Again, awesome weblog!

    Comment by Amelie — June 5, 2016 @ 2:32 pm

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: