JQuery: Highlight Table Row and Column On Hover

There is a mobile optimized version of this page, view AMP Version.

I was working on a project recently that had a pricing grid that I felt was hard to follow, I solution I decided on to make it more clear was to highlight the current cell that was being hovered, but also highlight the row and the column so that the user can clearly see the x,y axis for the hovered cell.

The resulting code works pretty well and can be seen below:

image

When hovering the heading along the top or down the left, the highlighter will not work – as you would expect!

Here is the HTML, JavaScript and CSS to get the example working. You will need jQuery, I used V1.9.0 but any version should be ok.

 

HTML

<table class="pricing" id="pricing">
	<tr>
		<th style="width:90px;height:50px"></th>
		<th style="width:100px;">up to 250</th>
		<th style="width:100px;">up to 500</th>
		<th style="width:100px;">up to 1500</th>
		<th style="width:100px;">up to 5000</th>
		<th style="width:100px;">5001+</th>
	</tr>
	<tr style="display:none;">
		<th></th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th style="height:100px">up to 5</th>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
	</tr>
	<tr>
		<th style="height:100px">up to 15</th>
		<td>&pound;</td>
	<td>&pound;</td>
	<td>&pound;</td>
	<td>&pound;</td>
	<td>&pound;</td>
	</tr>
	<tr>
		<th style="height:100px">up to 40</th>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
	</tr>
	<tr>
		<th style="height:100px">up to 80</th>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
	</tr>
	<tr>
		<th style="height:100px">81+</th>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
		<td>&pound;</td>
	</tr>
</table>

 

CSS

table.pricing td, table.pricing th{
	text-align:center;
	padding:5px;
	border:0px;
	
}

table.pricing th{
	background-color:#cfe3f9;
	 border: 1px solid #cfe3f9;
	
}

table.pricing {
	border:0px;
	border-collapse: separate;
	border-spacing: 0px;
}

.cur_col {
	background-color:#E6F2FF !important;
	border:1px solid #E6F2FF !important;
	border-left:1px solid #CFE3F9 !important;
	border-right:1px solid #CFE3F9 !important;
}
.cur_cell {
	background-color:#fff0a5 !important;
	border:1px solid #fff0a5 !important;
	border:1px solid #CFE3F9 !important;
}
.cur_row {
	background-color:#E6F2FF !important;
	border:1px solid #E6F2FF !important;
	border-top:1px solid #CFE3F9 !important;
	border-bottom:1px solid #CFE3F9 !important;
}

 

JavaScript (+jQuery)

<script type="text/javascript">
	function inittbletohoverHighlight() {
					
		if (tbletohover==null) {
			return;
		}
		
		// detect cursor position
		for(var i=0; i<tbletohover.rows.length; i++) {
			tbletohover.rows[i].row_index=i;
			for(var j=0; j<tbletohover.rows[i].cells.length; j++) {
				tbletohover.rows[i].cells[j].column_index=j;
				tbletohover.rows[i].cells[j].onmouseover=function() {
					highlight(this.parentNode.row_index, this.column_index, 'on');
				}
				tbletohover.rows[i].cells[j].onmouseout=function() {
					highlight(this.parentNode.row_index, this.column_index, 'off');
				}
			}
		}
	}
	
	function highlight(row, col, state) {
		if (row == 0 || col == 0) {
			return;
		}
		for(var i=0; i<tbletohover.rows.length; i++) {
			if(state=='off') {
				for(var j=0; j<tbletohover.rows[i].cells.length; j++) {
					tbletohoverElement = tbletohover.rows[i].cells[j]
					$(tbletohoverElement).removeClass('cur_col');
				}
			}
			if(state=='on') {
				tbletohoverElement = tbletohover.rows[i].cells[col]
				$(tbletohoverElement).addClass('cur_col');
			}
		}
		
		for(var i=0; i<tbletohover.rows[row].cells.length; i++) {
			if(state=='on') {
				tbletohoverElement = tbletohover.rows[row].cells[i]
				$(tbletohoverElement).addClass('cur_row');
				tbletohoverElement = tbletohover.rows[row].cells[col]
				$(tbletohoverElement).removeClass('cur_row');
				$(tbletohoverElement).removeClass('cur_col');
				$(tbletohoverElement).addClass('cur_cell');
			}
			if(state=='off') {
				tbletohoverElement = tbletohover.rows[row].cells[i]
				$(tbletohoverElement).removeClass('cur_row');
				tbletohoverElement = tbletohover.rows[row].cells[col]
				$(tbletohoverElement).removeClass('cur_cell');
			}
		}
	}
	
	var tbletohover = document.getElementById('pricing');
	inittbletohoverHighlight();
</script>

 

As always please drop your comments, suggestions and recommendations below:

Author: Dean Williams

I'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips