用jQuery实现：鼠标滑过 单元格所在行和列都变色

想做一个鼠标滑过，单元格所在行和列都变色的表格，写的时候查了一下js的写法，用jQuery写的时候，遇到的问题就是在同一列的单元格不太好算，最后写出来的结果如下，希望大牛给些建议，谢谢：
jQuery代码如下：<script type="text/javascript">
   $(function(){
    $("#tab tr").each(function(){
     $(this).children("td").each(function(i){
      $(this).mouseover(function(){
       $(this).parent().css("backgroundColor","red");
       
       $("#tab tr").each(function(){
                $(this).children("td").each(function(j){
              if(i==j){
            $(this).css("backgroundColor","red");
           }
           
          });
         });
      });
      $(this).mouseout(function(){
       $(this).parent().css("backgroundColor","");     //注意，此处backgroundColor一定要置为“”而不是“white” 
       $("#tab tr").each(function(){
                $(this).children("td").each(function(k){
              if(i==k){
            $(this).css("backgroundColor","");
           }
           
          });
         });
      });
     });
    });
   });
  
            </script>

解决方案 »

  1.   

    楼主是要行变色，还是根据列变色呢？如果你要的只是搁行变色，那代码可以再精简很多！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
    <title>无标题文档</title> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript">
      $(function(){
          $("#tab tr").hover(
            function(){
                 $(this).css("background","");
             $(this).css("background","red");
                   },
            function(){
             $(this).css("background","");
             $(this).css("background","white");
                    }
              );
        
      });
      
      </script>
      </head>
      <body>
      <table id="tab">
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      </table>
    </body>
    </html>
      

  2.   

    如果希望是列变色，也一样简单，多加2个字母td就可以了！如下：
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
    <title>无标题文档</title> 
    <script type="text/javascript" src="jq.js"></script> 
    <script type="text/javascript">
      $(function(){
          $("#tab tr td").hover(
            function(){
                 $(this).css("background","");
             $(this).css("background","red");
                   },
            function(){
             $(this).css("background","");
             $(this).css("background","white");
                    }
              );
        
      });
      
      </script>
      </head>
      <body>
      <table id="tab">
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      </table>
    </body>
    </html>
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
    <title>无标题文档</title> 
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
    <script type="text/javascript">
      $(function(){
          $("#tab tr").hover(
             function(){ $(this).addClass("hover");},
             function(){$(this).removeClass("hover");}
              );     
      });
      
      </script>
    <style>
    .hover{background:#FF0000}
    </style>
      </head>
      <body>
      <table id="tab" border="0" cellpadding="0" cellspacing="0">
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
      </table>
    </body>
    </html>
      

  4.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style type="text/css">
            td{border:1px solid #ccc;}
        </style>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#tab td").mouseover(function(){
                    var index = $(this).parent().find("td").index($(this))+1;
                    $("#tab td:nth-child("+index+")").css("background","red");
                    $(this).siblings().css("backgroundColor","red");
                }).mouseout(function(){
                    var index = $(this).parent().find("td").index($(this))+1;
                    $("#tab td:nth-child("+index+")").css("background","")
                    $(this).siblings().css("backgroundColor","");
                })
            })
        </script>
    </head>
      <body>
      <table id="tab" border="0" cellpadding="0" cellspacing="0">
      <tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第二列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第二列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第二列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第二列</td><td>第一行第二列</td></tr>
      <tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第二列</td><td>第一行第二列</td></tr>
      </table>
    </body>
    </html>