同时选择表格行列的实现

先看一个效果图：

这是腾讯视频 nba 每队的数据统计页面，当用户鼠标放上去的时候，会将对应的行和列改变样式，这个效果不是很明显，下面是我做的一个 demo 效果

下面来看实现过程,html 表格的代码就不贴了，

/** 样式 */
<style>
    .tr-td-hover{
        background-color: #fffaea;
    }
    .td-courent{
        background-color: #000;
    }
</style>

/*js */
(function(){
    $(document).on('mouseover','.form_table.border td', function(){
      var index = $(this).parent().children().index($(this)); 
      var trs = $(this).parent().parent('tbody').find('tr');     
      for(var i = 0, len = trs.length; i < len; i++){          
          $(trs[i]).children('td:eq('+index+')').addClass('tr-td-hover');        
      } 
      $(this).addClass('td-current');
  });

  $(document).on('mouseout','.form_table.border td', function(){
      var index = $(this).parent().children().index($(this));      
      var trs = $(this).parent().parent('tbody').find('tr');
      for(var i = 0, len = trs.length; i < len; i++){         
         $(trs[i]).children('td:eq('+index+')').removeClass('tr-td-hover');
      }   
      $(this).removeClass('td-current');
  });
})();

这是一个简单的实现，在常规的表格中是可以的，但是在单元格上存在 rowspan,collspan 属性时就会有问题，如下面的效果

我们在鼠标移上的事件中添加代码

$(document).on('mouseover','.form_table.border td', function(){
      var index = $(this).parent().children().index($(this));
      var tdNum = $(this).parent().get(0).cells.length;   
      var trs = $(this).parent().parent('tbody').find('tr');
      var rowspan = $(this).attr('rowspan');
      for(var i = 0, len = trs.length; i < len; i++){
          var currNum = $(trs[i]).get(0).cells.length;
          var id = index - (tdNum - currNum);
          if(!rowspan){
            $(trs[i]).children('td:eq('+id+')').addClass('tr-td-hover');
          }          
      }
      $(this).addClass('td-current');
  });

同样在鼠标移出时也添加以上的代码就可实现，

这只是一个简单的实现，有兴趣的可以进一步补充,,,,