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

Filed under:

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.

© Stack Overflow or respective owner

Related posts about JavaScript