Fade HTML Table Row on Hover Using jQuery


Fade HTML Table Row

Fade HTML table Row are the ideal choice for displaying data in tabular form.  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 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. 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');
 });
});

 

Leave a Reply

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