Table row manipulation using jQuery JavaScript

In a jQuery tutorial, I’ve shown how to display different color in alternate row of table using jQuery. This time I’ve come up with advanced version of same tutorial where you can add different color in alternate row of table whereas you can display a different color when mouse moves over each row of table furthermore you can assign a different color to table row when mouse is clicked in the table row.

View Live Demo

HTML code for table row filtering using jQuery

<table id="mytable" border="0" width="40%">
  <tr><td>Michael</td><td>21</td></tr>
  <tr><td>Sam</td><td>22</td></tr>
</table>

As you can see there is nothing special in the above code where I’ve defined a table with id “mytable”.

CSS code for table row manipulation

.oddtr
{
	background-color:#EFF1F1;
}
.eventr
{
	background-color:#F8F8F8;
}
.trover
{
	background-color: #0099CC;
}
.trclick
{
	background-color: #00CCCC;
}

As you can above code, I’ve defined four different classes with four different color. oddtr for coloring the odd row of table, similarly eventr for even row of table then trover class for displaying different color when mouse moves over the table row i.e on mouse over event. Finally, trclick class for displaying different color of the row when mouse is clicked in the table row. Note that you can change these colors according to your choice.

jQuery’s JavaScript code for table row manipulation

//these two line adds the color to each different row
$("#mytable tr:even").addClass("eventr");;
$("#mytable tr:odd").addClass("oddtr");;
//handle the mouseover , mouseout and click event
$("#mytable tr").mouseover(function() {$(this).addClass("trover");}).mouseout(function() {$(this).removeClass("trover");}).click(function() {$(this).toggleClass("trclick");});

The first two line of jQuery adds two differnt classes to the alternate rows of  table with id “mytable“. The last line of jQuery acts for three differnt on the table row. When mouse is moved over the table row trover class is added to that table row. When mouse moves away form that table row trover class is removed from that particular row and finally when mouse is clicked on tha particular row it toggles the class trclick on that particular row.

Download Full Source Code

Popularity: 12%