<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="\js\jquery-1.4.2.min.js"></script>
 </head>
 <style>
  .odd{background:#3CF}
  .even{background:#FFC}
  .td{border:solid;border-spacing:20px;200px;}
 </style>
 <tbody>
   <table class="td">
      <tr>
    <th>姓名</th>
<th>性别</th>
<th>家庭地址</th>
  </tr>
      <tr id="row1" class="parent" colspan="3"><th bgcolor=red>数学组<th></tr>
  <tr class="child_row1" ><td>雷军</td><td>女</td><td>上海人</td></tr>
  <tr class="child_row1"><td>李开复</td><td>男</td><td>杭州人</td></tr>
  <tr class="child_row1"><td>姚明</td><td>男</td><td>绍兴人</td></tr>
  <tr id="row2" class="parent" colspan="3"><th bgcolor=red>语文组<th></tr>
  <tr class="child_row2"><td>周鸿祎</td><td>男</td><td>宁波人</td></tr>
  <tr class="child_row2"><td>李彦宏</td><td>男</td><td>绍兴人</td></tr>
  <tr class="child_row2"><td>马云</td><td>男</td><td>绍兴人</td></tr>
   </table>
   <p>
   <label>请输入姓名:</label>
   <input type="text" value="" id="filterName" style="background:yellow"/>
 </tbody>
</html>
<script>
  $(function(){
    $("tr.parent").click(function(){
 //siblings取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
   $(this).toggleClass("even").siblings('.child_'+this.id).toggle();
});
$("tr").hover(function(){
  $(this).addClass("odd").siblings().removeClass("odd").end();
    });
    $("tr:contains('马云')").addClass("odd");//特定选中某一行 //$("tr").hide().filter(":contains(马)").show();//过滤刷选出含有"马"的一行 $("#filterName").keyup(function(){
  $("tr").hide().filter(":contains('"+this.value+"')").show();
});
  });</script>
为什么选中表格的时候不是整行都变色,而是几个字段背景色变了,还有如何把鼠标样式改成箭头