table表格列随鼠标高亮显示

怼烎@ 2022-04-17 07:15 506阅读 0赞

## 前言 ##

在表格开发中，有时因为表格列数较多，需要表格的列随着鼠标的移动高亮显示，方便查看，如下图（配合行高亮显示）![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjM3NzA1_size_16_color_FFFFFF_t_70]

## 代码 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjM3NzA1_size_16_color_FFFFFF_t_70]: /images/20220417/3227d147c32c45cb97318e3a15ebcd5c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，506人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标进入显示高亮效果的源码

以下是 HTML 和 CSS 代码，实现鼠标悬停在元素上时显示高亮效果： HTML： <div class="highlight">鼠标悬停在此处显示高亮效果</d

客官°小女子只卖身不卖艺/ 2024年03月25日 10:47/ 0 赞/ 92 阅读

相关 DataTables鼠标停留高亮行并且鼠标点击二倍高亮行

场景 DataTables的行，实现鼠标悬浮时高亮显示此行(即改变此行背景颜色)并且鼠标点击时二倍高亮显示此行（即再次改变此行颜色）。查看官方示例代码： [http

桃扇骨/ 2023年10月18日 20:40/ 0 赞/ 83 阅读

相关 echarts鼠标悬停发光高亮

关键代码： > //鼠标悬停时： > emphasis: { > itemStyle: { > // color: '333FFF

曾经终败给现在/ 2023年01月15日 03:41/ 0 赞/ 472 阅读

相关 layui table 数据表格固定列的行高和table其他列的行高不一致

![在这里插入图片描述][bedfeaf4ef818cfeb0b6dcc3ba901feb.png_pic_center] 1、问题描述：使用layui的table数据表格，

小鱼儿/ 2023年01月12日 01:55/ 0 赞/ 626 阅读

相关工作记录 -- el-table 取消鼠标悬浮时行高亮效果

使用el-table组件时，会有默认事件：当鼠标悬停时会高亮当前行如果不想要，可以把颜色设置成背景色，或者任何你想要的颜色： .el-table tbo

╰+哭是因爲堅強的太久メ/ 2022年12月20日 03:27/ 0 赞/ 229 阅读

相关搜索高亮显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

小咪咪/ 2022年11月19日 07:38/ 0 赞/ 282 阅读

相关 js之实现表格高亮显示

步骤：第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数第二步：获取鼠标移上去的那行，对其设置背景颜色 js代码：

谁借莪１个温暖的怀抱￠/ 2022年05月31日 08:53/ 0 赞/ 279 阅读

相关 js实现高亮显示鼠标所在行

行： <tr id="data_${stat.index}" class="main_trbg" align="center"> Js: / 给数据行绑定

痛定思痛。/ 2022年05月23日 21:18/ 0 赞/ 194 阅读

相关 Eclipse 高亮显示

Eclipce选中一个变量时，所以引用和声明变量的地方都会高亮代码显示，很方便，但有时没这个功能了。。采取如下操作： Toggle Mark Occurrences(Al

Bertha 。/ 2022年05月16日 10:52/ 0 赞/ 315 阅读

相关 table表格列随鼠标高亮显示

前言在表格开发中，有时因为表格列数较多，需要表格的列随着鼠标的移动高亮显示，方便查看，如下图（配合行高亮显示）![在这里插入图片描述][watermark_type_Z

怼烎@/ 2022年04月17日 07:15/ 0 赞/ 507 阅读