Jquery Table Row Highlight On Mouseover

Jquery Table Row Highlight On Mouseover

You want to highlight table row on mouse over the row. Here we will use Jquery to highlight the row on mouse over. To do that we will use hover effect. Let’s look at the code below

$(“elementTag”).hover(A,B);

In the code above we are selecting elements by it’s tag name and applying hover function.

A- perform action when mouse is over the element.

B- Perform the action when mouse leaves the element.

 $(document).ready( function (){ 

   $("tr").not(':first').hover(
     
      function () {$(this).css("background","blue");},

      function () {  $(this).css("background","");}
    );

});

Description: The function .not(‘:first’) ensures that the element in row collection is not a header row of the table.

Complete code

<html>
<head>
<title>
Jquery highlight table row
</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js>
</script>

<script type="text/javascript" language="javascript">

$(document).ready( function (){

   $("tr").not(':first').hover(



   function () {
    $(this).css("background","blue");
  },
  function () {
    $(this).css("background","");
  }
);
});

</script>
</head>

<body>

<table><tr> <td>Header 1 </td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
<tr>
<td>demo 1</td>
<td>demo 2</td>
<td>demo 3</td>
</tr>
<tr>
<td>demo 4</td>
<td>demo 5</td>
<td>demo 6</td>
</tr>
</table>

</body>

</html>

You can copy the code into notepad and save it as html. Open that html file in browser to see JQuery in Action.

Jquery Table Row Highlight On MouseoverJquery Select Table RowLearning JqueryBasics of jqueryJQuery SlideJquery Trim StringHow to set default browserGridView RowJQuery Animate Div Height and WidthGoogle JQuery CDNasp.net Gridview checkbox

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.