X

LATEST #JQUERY NEWS

Fade HTML Table Row on Hover Using jQuery


HTML tables are the ideal choice for displaying data in tabular form. Tables can be styled and made interactive with a combination of jQuery and CSS. You can do different style experiments with tables for a better user experience. In this short post, we’ll also experiment with fading all rows except the selected row on hover to get user attention using jQuery and CSS.

Fade HTML table row

HTML Markup

To get started, create a standard HTML table on the page. For this demo, our table has 3 columns: Name, Age, Country and some random data.

<table id="tblData">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Maria Anders</td> 
<td>30</td>
<td>Germany</td>
</tr>
<tr>
<td>Francisco Chang</td>
<td>24</td>
<td>Mexico</td>
</tr>
<tr>
<td>Roland Mendel</td>
<td>100</td>
<td>Austria</td>
</tr>
<tr>
<td>Helen Bennett</td>
<td>28</td>
<td>UK</td>
</tr>
<tr>
<td>Yoshi Tannamuri</td>
<td>35</td>
<td>Canada</td>
</tr>
<tr>
<td>Giovanni Rovelli</td>
<td>46</td>
<td>Italy</td>
</tr>
<tr>
<td>Alex Smith</td>
<td>59</td>
<td>USA</td>
</tr>
</table>

CSS

The following CSS classes are used to style the table and its rows. The blur CSS class creates a fade effect on table rows. Here, the text-shadow property of CSS3 is used to create a faded shadow. This property takes 4 values where the first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value specifies the color of the shadow.

table {
 font-family: arial, sans-serif;
 border-collapse: collapse;
 width: 100%;
}
td,
th {
 border: 1px solid #dddddd;
 text-align: left;
 padding: 8px;
}
th {
 background-color: #ccd;
}
.blur {
 text-shadow: 1px 1px 5px #aaa;
 color: transparent;
}

jQuery Code

To fade other rows, the jQuery solution is to assign the blur CSS class to all the rows except the selected row on hover and remove the blur CSS class from all the rows on mouse leave.
Here is the complete jQuery code:

$(document).ready(function() {
 $("#tblData tr:has(td)").hover(function(e) {
 $(this).css("cursor", "pointer");
 $("#tblData tr:has(td)").addClass('blur');
 $(this).removeClass('blur');
 },
 function(e) {
 $("#tblData tr:has(td)").removeClass('blur');
 });
});

The code is pretty straightforward and self-explanatory. On hover, it first assigns the blur CSS class to all the rows and then remove the blur class from the current row in focus. On mouse leave event, remove the blur class from all the rows.

You can check out the code in action here!

To make it look more attractive, you can highlight the selected rows via changing the background color or increasing the font size. Let’s define a CSS class called “highlight”:

.highlight {
 font-weight:bold;
 background-color: #ddeedd;
}

Below is the updated jQuery code for highlighting the selected row and fading all other rows.

$(document).ready(function() {
 $("#tblData tr:has(td)").hover(function(e) {
 $(this).css("cursor", "pointer");
 $("#tblData tr:has(td)").addClass('blur');
 $(this).removeClass('blur');
 $(this).addClass('highlight');
 },
 function(e) {
 $("#tblData tr:has(td)").removeClass('blur highlight');
 });
});

You can check out the code in action here!

Conclusion

To sum it up, we just saw how to create a fading effect on all table rows excluding the selected row. The CSS3 text-shadow property is used to create a faded shadow effect. The jQuery solution also shows how to make the selected row look more appealing to the user. You can easily modify this code to create different shadows and implement different styles for highlighting the selected row. Have fun customizing!

Recently Published

article image
»

15 Newest jQuery plugins for responsive website

Due to the proliferation of smartphones and tablets, responsive ...

article image
»

How to use Redux with jQuery

State management is one of most integral parts of any software and a ...

article image
»

Fade HTML Table Row on Hover Using jQuery

HTML tables are the ideal choice for displaying data in tabular form. ...

article image
»

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, ...

article image
»

Top 5 Best JavaScript Template Engines

Template engines help in the decoupling of HTML and JavaScript code ...

article image
»

3 jQuery/JavaScript Plugins for Push Notifications

Push notifications started from the mobile business but this ...

article image
»

Create Smooth Animation Using jQuery’s “stop()”

Making Quick Work jQuery’s animate() method is a quick way to ...

article image
»

Check all checkboxes in HTML table using jQuery

HTML tables are a very handy and useful element. They can adapt to ...

article image
»

Changing images in a loop on hover using jQuery

Why use this Function? Changing images in a loop on mouse over is a ...