【分页预览JS实例】JS实现鼠标悬停列标题有超链时标题高亮显示

1. 问题描述

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

2. 示例

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

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

编辑加载结束事件，添加下面的 JavaScript 代码：

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

复制代码

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

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

3. 模板下载

模板下载见附件

看着不错，回头试试~

附件在哪里？