This week's book giveaway is in the OO, Patterns, UML and Refactoring forum. We're giving away four copies of Refactoring for Software Design Smells: Managing Technical Debt and have Girish Suryanarayana, Ganesh Samarthyam & Tushar Sharma on-line! See this thread for details.
Yesterday I was attempting to write a script wherein, I had this Table with a single row and about 10 cells in it. This row was to serve as the header of a table and the user had the option of selecting which all cells he/she wanted in the table for the header row. For every cell, there was a checkbox the user could check/uncheck to add/remove the cell from the row. The checkbox's value was the same as the cell's ID. Initially what I did was:
In IE this worked just fine, but in FF and Opera the behaviour was completely erratic. The cells got merged into other cells and messed up the display. Then I created a CSS class named : "hideElems" which had a single property: display: none; And I changed the code above to:
I don't think there's anything wrong with the script. Firebug doesn't throw any errors either. As for the code, I think you can try it locally by just creating an HTML document and pasting the code below. At present, I'm taking the style.display approach. In IE it'll work fine, but in FF if you deselect a couple of checkboxes and then reselect them then you'll see what I mean. After that, just uncomment the the commented script and comment out the style.display part of the script. You'll see that it works fine in FF too now. Let me know if you need something else to see what I mean.
Hopefully someone out there can tell me what causes these aberrant behaviour.
NOTE: You'll need to replace all occurrences of "onclic" with "onclick" to make this code work. The ranch doesn't allow posting of code containing certain script keywords :-/
[ April 01, 2008: Message edited by: Anirvan Majumdar ]