jquery 鼠标移上变色效果处理

<html> 
  <head> 
    <title>表格变色</title> 
    <style type="text/css"> 
        .odd{background:#ffffee;} 
        .even{background:#fff38f;} 
        .first{background:red;} 
        .last{background:blue;} 
        .mouseOver{background:green;} 
    </style> 
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
   <script type="text/javascript"> 
           $(function(){ 
               $("tr:odd").addClass("odd");        //加奇行样式 
               $("tr:even").addClass("even");        //加偶行样式 
               $("tr:first").addClass("first");    //为第一行加样式 
               $("tr:last").addClass("last");        //为最后行加样式 
               //为行元素加上鼠标移入和移出事件 
               $("tr").mouseover(function() { 
//if(!$("tr:first") && !$("tr:last")){   
                 $(this).addClass("mouseOver")    //加上样式 
//}
            }).mouseout(function() { 
                $(this).removeClass("mouseOver")//去掉样式 
            }); 
           }) 
   </script> 
  </head> 
  <body> 
      <table border="1"> 
          <tr><td>姓名</td><td>年龄</td></tr> 
          <tr><td>王华</td><td>18</td></tr> 
          <tr><td>刘云</td><td>19</td></tr> 
          <tr><td>刘亮</td><td>15</td></tr> 
          <tr><td>叶子</td><td>17</td></tr> 
          <tr><td>刘梦</td><td>20</td></tr> 
      </table> 
  </body> 
</html>
我现在希望第一行 和最后两行不参与 鼠标移上变色效果 单独有样式定义 怎么操作？？？？我加了这句 但不管用：if(!$("tr:first") && !$("tr:last"))

解决方案 »

  1.   

    <html> 
      <head> 
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
        <title>表格变色</title> 
        <style type="text/css"> 
            .odd{background:#ffffee;} 
            .even{background:#fff38f;} 
            .first{background:red;} 
            .last{background:blue;} 
            .mouseOver{background:green;} 
        </style> 
       <script type="text/javascript" src="js/jq.js"></script>
       <script type="text/javascript"> 
               $(function(){ 
                   $("tr:odd").addClass("odd");        //加奇行样式 
                   $("tr:even").addClass("even");        //加偶行样式 
                   $("tr:first").addClass("first");    //为第一行加样式 
                   $("tr:last").addClass("last");        //为最后行加样式 
                   //为行元素加上鼠标移入和移出事件 
                   $("tr:not(:first):not(:last)").mouseover(function() { 
            //if(!$("tr:first") && !$("tr:last")){                  
                            $(this).addClass("mouseOver")    //加上样式 
            //}
                }).mouseout(function() { 
                    $(this).removeClass("mouseOver")//去掉样式 
                }); 
               }) 
       </script> 
      </head> 
      <body> 
          <table border="1"> 
              <tr><td>姓名</td><td>年龄</td></tr> 
              <tr><td>王华</td><td>18</td></tr> 
              <tr><td>刘云</td><td>19</td></tr> 
              <tr><td>刘亮</td><td>15</td></tr> 
              <tr><td>叶子</td><td>17</td></tr> 
              <tr><td>刘梦</td><td>20</td></tr> 
          </table> 
      </body> 
    </html>
      

  2.   


    <html> 
      <head> 
        <title>表格变色</title> 
        <style type="text/css"> 
            .odd{background:#ffffee;} 
            .even{background:#fff38f;} 
            .first{background:red;} 
            .last{background:blue;} 
            .mouseOver{background:green;} 
        </style> 
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
       <script type="text/javascript"> 
               $(function(){ 
                   $("tr:odd").addClass("odd");        //加奇行样式 
                   $("tr:even").addClass("even");        //加偶行样式 
                   $("tr:first").addClass("first");    //为第一行加样式 
                   $("tr:gt(3)").addClass("last");        //为最后行加样式 -----gt(3) 可改为 $("tr").size(); 
     //$("tr:gt("+(len-3)+")").addClass("last"); 可以写活，下面类似
                   //为行元素加上鼠标移入和移出事件 
                   $("tr:gt(0):lt(3)").mouseover(function() { //------$("tr:gt(0):lt(3)")
            //if(!$("tr:first") && !$("tr:last")){                  
                            $(this).addClass("mouseOver")    //加上样式 
            //}
                }).mouseout(function() { 
                    $(this).removeClass("mouseOver")//去掉样式 
                }); 
               }) 
       </script> 
      </head> 
      <body> 
          <table border="1"> 
              <tr><td>姓名</td><td>年龄</td></tr> 
              <tr><td>王华</td><td>18</td></tr> 
              <tr><td>刘云</td><td>19</td></tr> 
              <tr><td>刘亮</td><td>15</td></tr> 
              <tr><td>叶子</td><td>17</td></tr> 
              <tr><td>刘梦</td><td>20</td></tr> 
          </table> 
      </body> 
    </html>