前言
在表格开发中,有时因为表格列数较多,需要表格的列随着鼠标的移动高亮显示,方便查看,如下图(配合行高亮显示)
代码
$('#baseTable tbody tr td').mouseover(function(){
var i = $(this).prevAll('td').length;
$("#baseTable tbody").children('tr').each(function(){
$(this).children('td').eq(i).addClass('clickRow');
})
});
$('#baseTable tbody tr td').mouseout(function(){
var i = $(this).prevAll('td').length;
$("#baseTable tbody").children('tr').each(function(){
$(this).children('td').eq(i).removeClass('clickRow');
})
});
其中,clickRow是class样式,
.clickRow,.clickRow:hover{
background-color:rgba(135, 206, 250, 0.3);
}
后记
注意:table表格一定要在js代码之前加载完成,不然就不好使了。