A current trend in data display is to now have row highlighting appear when you hover over any table cell. This is not a particularity daunting task, as it is a simple JavaScript class swap for each table row. But is there an easy way to highlight columns as well? The short answer is no, but with some basic DOM scripting the answer is yes.

Now what happens when you want to take this script to the next level? Let’s say I just wanted to highlight the leftmost cell and topmost cell of each cell that was hovered over. This again, becomes more complex with JavaScript.

I came up with the following scenarios for ways to highlight rows:

• highlight entire row
• highlight entire column
• highlight only header cells
• highlight active cell beneath the cursor differently
• create a crosshairs effect
• create a spotlight effect

All of these scenarios are completely independent of each other so they may be used in conjunction with the other. Also each function is abstracted out to the presentation layer to make for easy editing via stylesheets.

The code to apply table and row highlighting to your table is relatively easy:

<script type="text/javascript">
	/*
		Padding should be adjusted for cells that
		shouldn't have hover effects on them.
		initCrossHairsTable(id, top, right, bottom, left);
	*/
	initCrossHairsTable("crossTable", 1, 1, 1, 1);
</script>

That is all there is to applying the script.

Here is the demo of the script: Table Crosshairs.

Note that as it is written, the script can only be styled one way unless the JavaScript variables are overwritten on other pages.

Please remember that this script is only a rough draft on my idea. I don’t know if I ever plan on releasing a “prettier” version of the code. However as all developers know, we always want to go back and clean up the code later.