I was led into the wonderful world of the DOM and DHTML when I stumbled upon this page demonstrating how to make all your tables sortable using Javascript (thus avoiding a trip to the server to fetch the sorted data). The page features a script that does this for you, and all you have to do to make your table sortable is give it a class of "sortable" and make sure it has a unique id, and include the javascript in your page, of course. That's it. You can see it in action below also (and of course at the page above--I highly recommend a visit, it includes a detailed description of how the script works). Very slick, and very useful. And sort of magic, how you can just drop the script in and it takes control of your plain jane table and makes it into a living, sortable DOMified table.

What I have below is another DOMified table. This one is not as slick--you actually have to put code into your table, but this is a specialized application so I don't think the "drop in script" approach is needed here. What I was working on was a web application to help me track monthly expenses (phone bill, rent, etc.). At some point I decided that I would like the ability to exclude certain bills (rows in the table) from the totals, to see the monthly totals, say, not including rent, or not including credit card bills. This is another perfect application of table DOMification. Below is what I came up with (and it is also made sortable, as the above table).

To use, just click on any row to remove it from the totals. Click again to include it in the totals. I was going to have a link or checkbox at the end of each row to click to include/exclude (and the checkbox is probably the best option ui-wise), but I though it would be cooler to be able to click anywhere on the row. You can't click in the first cell because the contents of that cell is a link to something else (to a chart in the actual version).

Unresolved issues:

• The column widths can change in some cases as you toggle rows on and off, due to the width of the total column numbers changing. It doesn't appear to be an issue in the above table.
• The handling of restoring the original row colors and row link color is klunky--hardcoded into the Javascript. I couldn't figure out how to restore the original color. I tried to save off row.style.color, but for some reason this did not work for me.

Loading comments...