jQuery Table Row Column Highlight on Hover

by Vincy. Last modified on July 12th, 2022.

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 mouse over, mouse out 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 Highlight 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

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page