JS实现鼠标悬停列标题有超链时标题高亮显示

编辑
文档创建者:cherishdqy (66470 )     浏览次数:1783次     编辑次数:3次     最近更新:ukae 于 2018-08-08     

目录:

1、问题描述编辑

当鼠标移动到可排序的列(列标题使用超级链接实现的排序)时,如何实现列标题高亮显示?如下图,当鼠标悬停到列标题有超链接的列时,列标题高亮显示。

222

2、示例编辑

参考横向扩展列多列排序做好点击列标题排序的报表。
222

点击菜单模板>模板web属性>分页预览设置,选择“为该模板单独设置”,添加一个“加载结束”事件。

222

编辑加载结束事件,添加下面的JavaScript代码:

$("td").mouseover(function(){ //鼠标悬浮在单元格上事件 var id=$(this).attr("id"); //获取鼠标当前所在单元格的id var num=id.search("-"); //获取id中“-”符号第一次出现的索引 var id1=id.substr(0,num).replace(/[^a-z]+/ig,""); //截取id值中的字母即列号 var id2=id.substr(num,id.length-num); //截取id id=id1+"1"+id2; //设置id为鼠标所在单元格的列表标题的单元格id,1表示列标题所在行 if($('td[id^='+id+']').attr('class').indexOf('celink')!==-1) //判断列标题是否包含超链接的class { $('td[id^='+id+']').css({'background':'yellow'}); //设置列标题单元格的背景色 } }); $("td").mouseleave(function(){ //鼠标离开单元格事件 var id=$(this).attr("id"); var num=id.search("-"); var id1=id.substr(0,num).replace(/[^a-z]+/ig,""); var id2=id.substr(num,id.length-num); id=id1+"1"+id2; //设置id为鼠标所在单元格的列表标题的单元格id,1表示列标题所在行 $('td[id^='+id+']').css({'background':'#e7ebf1'}); //设置列标题单元格的背景色为原来的背景色 });

代码中id=id1+"1"+id2;中的1为预览效果中标题所在的行。此方法仅适用于列标题为同一行的,像多列排序中的带超级链接列标题不在同一行不适用此方法。

保存模板,点击分页预览即可查看上面的效果。

附件列表


主题: 二次开发
标签: 暂无标签 编辑/添加标签
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗? [ 去社区提问 ]