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

13 thoughts on “Table row manipulation using jQuery JavaScript

  1. Roshan,

    Excellent. Very simple and easy to implement the table.

    The demo table was very help to visualize this behavior easily while reading your post.

    Ramesh
    The Geek Stuff

  2. @Ramesh – thank you very much such a nice words

  3. let me to tell u : YOU ARE THE BEST.
    You saved me alot of time and work.
    It’s possible with the Div’s?
    Thanks

  4. @Kamal – in this example I’ve also used div you can refer this post and use div in above example

    http://roshanbh.com.np/2008/03/different-color-alternate-row-jquery.html

  5. Thanks for informations.

  6. deepak

    Dear Roshan
    Is there a way to remove the highlight of previously clicked row when i click any other row..

  7. thank you man it’s real very usfull and esay

  8. Nice article with complete details and download link, Thanks for the help!!!

  9. Christopher

    Thanks for posting this. I tried to adapt it to what i need, but i have two tables in one html page.

    When I include another table and try to duplicate the jQuery code for table2 for instance, nothing is matched. How can i include 2 tables on the same page and have jQuery be applied to both tables?

    Thank you,
    Christopher

  10. Fantastic! Thanks so much!

  11. Khara

    Awesome! That was very useful. Thank you so much.

  12. Dave

    Very very nice indeed!
    100% solved my problem!
    Thanks!

  13. Very nice and useful example.
    Thanks

Leave a Reply

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

*