点击它时改变行的颜色

时间:2010-12-17 11:25:33

标签: jquery

你好我需要在点击特定行时更改行的颜色..如果我点击另一行,前一行的颜色应该消失..并显示该行的颜色如何实现..我有像这样的HTML代码..

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

谢谢

1 个答案:

答案 0 :(得分:2)

您可以使用类,如下所示:

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

然后在使用.delegate()点击时应用它,如下所示:

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

You can test it out here ...或jQuery版本1.3-1.4.2:

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

You can test that version here