dynamically showing table column using JavaScript

I thought that implementing turning on/off certain column in HTML table would be easy with JavaScript. It turned out that I was wrong. Not because it was way too complicated. It was because Firefox would not render properly when using *display* css property to show off/on.

In Firefox when table column (th and td cells at a certain index) needs to be turned on, simply set *disply* to “”. However, in IE7 the value needs to be “display”. IE would spit out error message otherwise.

Here’s the working sample.

Over any headers, just right click and select one you want to hide. Enjoy!

(I used YUI to create context menu.)