CODEWITHSUNDEEP
jquery
Mihir
Mihir

Reputation: 8734

changing the color of the row when we click on it

Hello i need to change the color of the row when i click the particular row.. if i click on another row the color to previous row should vanish..and appear color to that row how to implement.. i have the html code like this..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript" src="../js/jquery.js"> </script>
 <script type="text/javascript" src="../js/addtable.js"> </script>
 </head>

 <body>
  <div id="dummyContainer1">
  <table id="mytab">
  <tr><td>Name:</td><td><input type="text" id="tname"></td></tr>
  <tr><td>RollNo:</td><td><input type="text" id="trno"></td></tr>
  <tr><td>Marks:</td><td><input type="text" id="tmarks"></td></tr>
  </table>
   </div>
   <input type="button" id="addrow" value="AddRow">
   <input type="button"  id="delrow" value="DeleteRow">
 <table id="tab1" border="1">
<tbody>
<tr>
<td>Name</td>
<td>RollNo</td>
<td>Marks</td>
</tr>
</tbody>
  </table>

 </body>
</html>

Thank you

Upvotes: 0

Views: 4142

Answers (1)

Nick Craver
Nick Craver

Reputation: 630627

You can use a class, like this:

.selected td { background-color: #CCC; }

Then apply it when clicked using .delegate(), like this:

$("#tab1").delegate("tr", "click", function() {
   $(this).addClass("selected").siblings().removeClass("selected");
});

You can test it out here...or for jQuery versions 1.3-1.4.2:

$("#tab1 tr").live("click", function() {
   $(this).addClass("selected").siblings().removeClass("selected");
});

You can test that version here.

Upvotes: 2

Related Questions