效果演示图:
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>