Highlighting a Table Correctly Despite rowspan and colspan attributes - WITHOUT jQuery
- by ScottSEA
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:
Clicking on a cell in the body highlights the row.
Clicking on a cell in the head highlights the column.
If a column and row are both highlighted, the intersection is highlighted a different color (super-highlight).
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.
