jQuery Table Row Column Highlight on Hover

This jQuery tutorial helps to highlight table row and column on the mouseover event. There are several event handling functions in jQuery to highlight table row/column.

In this tutorial we are using jQuery hover() to pass functions to be called on mouseover, mouseout events. These functions are used to add/remove css class selectors to highlight table row/column.

View Demo


HTML Table Row Column

We are using this table for highlighting row and column using jQuery.

<table class="tutorial-table">
		<th class="table-header" width="10%">Q.No.</th>
		<th class="table-header">Question</th>
		<th class="table-header">Answer</th>
	  <tr class="table-row">
		<td>What is PHP?</td>
		<td>A server side scripting language.</td>
	  <tr class="table-row">
		<td>What is php.ini?</td>
		<td>The configuration file.</td>
	  <tr class="table-row">
		<td>How to set PHP configuration?</td>
		<td>By using php.ini configuration file.</td>

jQuery Row Column Hightlight on Hover

This jQuery code is used to invoke hover() on the mouseover event of the table-row(tr) and table-head(th) elements. This will execute jQuery highlight functions by changing the corresponding css properties.

	$(document).ready(function() {
		$('.table-row').hover(function() {             
		}, function() {
		$("th").hover(function() {
			var index = $(this).index();
			$("th.table-header, td").filter(":nth-child(" + (index+1) + ")").addClass("current-col");
			$("th.table-header").filter(":nth-child(" + (index+1) + ")").css("background-color","#999")
		}, function() {
			var index = $(this).index();
			$("th.table-header, td").removeClass("current-col");
			$("th.table-header").filter(":nth-child(" + (index+1) + ")").css("background-color","#F5F5F5")

View DemoDownload

This jQuery code tutorial was published on February 28, 2015.

↑ Back to Top