Highlighting a Table Correctly Despite rowspan and colspan attributes - WITHOUT jQuery
Posted
by ScottSEA
on Stack Overflow
See other posts from Stack Overflow
or by ScottSEA
Published on 2009-09-29T22:42:40Z
Indexed on
2010/04/07
6:03 UTC
Read the original article
Hit count: 503
JavaScript
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.
© Stack Overflow or respective owner