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.
HTML Table Row Column
We are using this table for highlighting row and column using jQuery.
<table class="tutorial-table">
<thead>
<tr>
<th class="table-header" width="10%">Q.No.</th>
<th class="table-header">Question</th>
<th class="table-header">Answer</th>
</tr>
</thead>
<tbody>
<tr class="table-row">
<td>1.</td>
<td>What is PHP?</td>
<td>A server side scripting language.</td>
</tr>
<tr class="table-row">
<td>2.</td>
<td>What is php.ini?</td>
<td>The configuration file.</td>
</tr>
<tr class="table-row">
<td>3.</td>
<td>How to set PHP configuration?</td>
<td>By using php.ini configuration file.</td>
</tr>
</tbody>
</table>
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() {
$(this).addClass('current-row');
}, function() {
$(this).removeClass('current-row');
});
$("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")
});
});
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.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.