怎样用Jquery实现当鼠标指到html表格的一个单元格时，该单元格所在的行列的颜色均变化？

怎样用Jquery实现当鼠标指到html表格的一个单元格时，该单元格所在的行列的颜色均变化？jqueryhtml鼠标背景颜色

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     
    <BODY>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
     
    <table id="tb1" width="204" height="104" border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td scope="col">A</td>
        <td scope="col">B</td>
        <td scope="col">C</td>
      </tr>
      <tr>
        <td scope="row">1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td scope="row">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
    </table>
    <script>
    $(function(){
    var tds=$('#tb1 td'),cc=$('#tb1 tr:eq(0) td').length;
    tds.hover(function(){
    var i= tds.index(this)%cc +1;
    tds.filter(':nth-child('+i +')').attr('bgcolor','blue')
    },function(){
    var i= tds.index(this)%cc +1;
    tds.filter(':nth-child('+i +')').attr('bgcolor','')
    })
    })
    </script>
    </BODY>
    </HTML>
      

  2.   

    仅供参考，不知道怎么优化<script>
    $(function() {
      $('td').mouseover(function(i){
        $(this).addClass('bg');
        $(this).parent().addClass('bg');
        var i = $(this).index();
        $('table tr').each(function(){
          $(this).find('td:eq('+i+')').each(function(){
            $(this).addClass('bg');
          });
        });
      });
      $('td').mouseout(function(){
        $(this).removeClass('bg');
        $(this).parent().removeClass('bg');
        var i = $(this).index();
        $('table tr').each(function(){
          $(this).find('td:eq('+i+')').each(function(){
            $(this).removeClass('bg');
          });
        });
      });
    });
    </script>
    <style>
    .bg { background-color:#f00 }
    </style>
    <table>
    <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
    <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
    <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
    <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
    </table>