Learning 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.

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!