Highlighting a Table Correctly Despite rowspan and colspan attributes - WITHOUT jQuery

Question

Thanks to some !#$#@ in another department who wrote some crap code, I am unable to use the jQuery library - despite my fervent desire to do so. Their software has already been released into the world, and I have to be compatible.

============================================

I am trying to highlight a table. Desired behavior:

1. Clicking on a cell in the body highlights the row.
2. Clicking on a cell in the head highlights the column.
3. If a column and row are both highlighted, the intersection is highlighted a different color (super-highlight).
4. Clicking on a previously super-highlighted cell turns off the highlights.

This behavior is simple enough to do with a basic table, but when rowspans and colspans start rearing their ugly heads, things start to get a little wonky... highlighting cell[5], for instance, no longer works reliably.

My thought, in order to speed execution time of the highlighting itself (by changing a class name), is to pre-calculate the 'offsets' of all cells - with a 'colStart' and 'colEnd', 'rowStart' and 'rowEnd' when the page loads and store that in an array somehow.

The question: How would YOU implement this functionality? I am fairly rusty at my JavaScript, awfully rudimentary in my programming skills and would benefit greatly from some guidance.

Thanks,

Scott.

Answer 1

If the reasons for not being able to use jQuery are technical (e.g. someone's used $ for something silly), you could try jQuery's noConflict mode. Just wanted you to be aware of that =)

Your precalculation system seems like it'd work to me, otherwise.