Jquery Select Table Row

Jquery Select Table Row

In this example we will see how to make table row as a selected row in the table collection using JQuery. Except header row we will attach click event to all table rows in the document.

$(document).ready( function (){

   $("tr").not(':first').click(
  function () {

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

     });


     $(this).css("background","yellow");    
  }
);});

JQuery Select Table Row Example

<html>
<head>
<title>
Jquery select table row
</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

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

$(document).ready( function (){

   $("tr").not(':first').click(
  function () {
     $("tr").each(function(){
       $(this).css("background","");
     });
     $(this).css("background","yellow");    
  }
);
});

</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>

Jquery Select Table RowHow to get Jquery selected optionJquery Table Row Highlight On MouseoverLearning JqueryBasics of jqueryJquery Dropdown Selected ValueGet Selected Value From Dropdownlist [JQuery]JQuery Select ChangeJquery Gridview Dropdownlist Selected Change Enable Disable ControlsGridview select emailHow to set default browser

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.