table表格列随鼠标高亮显示

怼烎@ 2022-04-17 07:15 474阅读 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 条评论，474人围观）

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

相关阅读

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

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

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

相关 echarts鼠标悬停发光高亮

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

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

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

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

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

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

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

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

相关 Altium Designer 鼠标移动到元件高亮显示连接网络

很多人在新安装的Altium Designer软件之后发现鼠标移动到线上或器件上不会高亮显示所有连接网络了。如下图左上角显示鼠标在R25上面（无法截图鼠标指针） ![wa

忘是亡心i/ 2022年12月17日 08:45/ 0 赞/ 409 阅读

相关搜索高亮显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

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

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

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

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

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

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

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

相关 Eclipse 高亮显示

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

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

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

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

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