Table表格滑过当前项［当前行］［当前列］对应高亮

效果演示图：

JS 代码如下：

function TableHover($table){

      $table.mouseenter(function(event) {
            var xIdx = 0, yIdx = 0;
            $table.each(function(index, el) {
                  $(this).removeClass('hover');
            });

            $(this).addClass('hover').siblings().removeClass('hover');
            $table.each(function(index, el) {
                  if($(this).hasClass('hover')){
                  xIdx = $(this).index();
                  yIdx = $(this).parent().index();
                  }
            });
            if(xIdx>0){
                  for(var i = 0; i < xIdx; i++) {
                      $(this).parent().children().eq(i).addClass('hover');
                  }
                 for(var i = 0; i < yIdx; i++) {
                     $(this).parent().parent().children().eq(i).children().eq(xIdx).addClass('hover');
                 }
             }

       });
      $table.mouseout(function(event) {
            $table.each(function(index, el) {
                 $(this).removeClass('hover');
            });
      });

}

export default TableHover;

调用：TableHover($('.table-container table td'));

CSS类：

table tr td.hover {
　　background-color: $gray250;
　　color: $white-color;
}
table tr td:nth-child(1).hover {
　　background-color: $gray300;
　　color: $white-color;
}
table tr td.th_title.hover {
　　background-color: $gray300;
　　color: $white-color;
}

td:hover{
　　background: $gray500 !important;
　　color: $white-color;
}

HTML代码：

<table style="overflow-x: auto;">
　　<tbody>
　　　　<tr>
　　　　　　<td class="th_title">Label</td>
　　　　　　<td class="th_title">US</td>
　　　　　　<td class="th_title">UK</td>
　　　　　　<td class="th_title">AU</td>
　　　　　　<td class="th_title">EU</td>
　　　　　　<td class="th_title">Length</td>
　　　　　　<td class="th_title">Length</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>36</td>
　　　　　　<td>6</td>
　　　　　　<td>4</td>
　　　　　　<td>4.5</td>
　　　　　　<td>36.5</td>
　　　　　　<td>9.06</td>
　　　　　　<td>23</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>37</td>
　　　　　　<td>6.5-7</td>
　　　　　　<td>4.5-5</td>
　　　　　　<td>5-5.5</td>
　　　　　　<td>37.5</td>
　　　　　　<td>9.25</td>
　　　　　　<td>23.5</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>38</td>
　　　　　　<td>7.5</td>
　　　　　　<td>5.5</td>
　　　　　　<td>6</td>
　　　　　　<td>38</td>
　　　　　　<td>9.45</td>
　　　　　　<td>24</td>
　　　　</tr>
　　</tbody>
</table>