As I mentioned earlier I’m using this site and two others as an excuse to update my web authoring skills. At work I was also asked to do what initially seemed to be a simple task, but ended up not so simple. There’s a table of data with alternating row background colors to help legibility. Based upon what a user selects from a select list on the page we want to highlight a particular column of the table by changing its background color.
So, I quickly learned about the new col tag table child, as well as the document.getElementById javascript method. However, a straightforward col.style.backgroundColor = x call didn’t work. After some research I discovered that row backgrounds are drawn on top of column backgrounds. It was time I enter hack mode.
I ended up dynamically creating a “shadow” table absolutely z-positioned behind the primary one, matching it’s position, size, and number of rows. The shadow table’s rows had background colors. The primary table’s background colors were all transparent, so that when I set a column’s background color, it was visible. Problem solved.
I think a lot of developers look down upon doing javascript and html work (and GUI work in general) and that’s really a shame. Elegant code and ingenious solutions can be found in the user interface arena.