table表格列随鼠标高亮显示

前言

在表格开发中，有时因为表格列数较多，需要表格的列随着鼠标的移动高亮显示，方便查看，如下图（配合行高亮显示）

代码

$('#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代码之前加载完成，不然就不好使了。