JS实现鼠标经过/点击单元格/当前行样式改变

1.1 问题描述

场景描述：在报表制作中，有时为了突出鼠标所在单元格，需要突出一下背景色（字体），而在鼠标离开后恢复原有的背景色（字体）。

通过本文档，可以方便地设置鼠标所在单元格背景色变色、字体改变，当在鼠标离开后恢复原色的功能。

场景还原：

如图一：鼠标移至单元格背景色变为红色，字体放大，点击单元格会有绿色背景闪烁一下且字体变小。

也可以使单元格所在行整体改变背景色和字体，如图二：

1.2 实现思路

通过获取到当前的行数或单元格进行改变样式。

2. 示例2.1 示例一

打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt

点击模板>模板 Web 属性>填报页面设置，去除填报当前编辑行背景设置的勾选，在事件设置中添加一个【加载结束】事件：

1. //鼠标经过
   
2. $(".x-table td").mousemove(function() {
   
3. //所在行背景色:红色
   
4.         $(this).css("background-color","red");
   
5. //所在行单元格字体:18px
   
6.         $(this).css("font-size","18px");
   
7. });
   
8. //鼠标点击
   
9. $(".x-table td").mousedown(function() {
   
10. //所在行背景色:黄色
    
11.         $(this).css("background-color","yellow");
    
12. //所在行单元格字体:18px        
    
13.         $(this).css("font-size","18px");
    
14. });
    
15. //鼠标离开
    
16. $(".x-table td").mouseout(function() {
    
17. //所在行背景色:白色
    
18.         $(this).css("background-color","white");
    
19. //所在行单元格字体:12px
    
20.         $(this).css("font-size","12px");
    
21. });

复制代码

2.2 示例二

将上述模板中的加载结束事件，代码修改如下：

1. //鼠标经过
   
2. $(".x-table tr").mousemove(function() {
   
3. //所在行背景色:红色
   
4.         $(this).css("background-color","red");
   
5. //所在行单元格字体:18px
   
6.         $(this).find("td").css("font-size","18px");
   
7. });
   
8. //鼠标点击
   
9. $(".x-table tr").mousedown(function() {
   
10. //所在行背景色:黄色
    
11.         $(this).css("background-color","yellow");
    
12. //所在行单元格字体:18px        
    
13.         $(this).find("td").css("font-size","18px");
    
14. });
    
15. //鼠标离开
    
16. $(".x-table tr").mouseout(function() {
    
17. //所在行背景色:白色
    
18.         $(this).css("background-color","white");
    
19. //所在行单元格字体:12px
    
20.         $(this).find("td").css("font-size","12px");
    
21. });

复制代码

注：此方法同样适用于分析预览，具体设置方法类似，需要在模板>模板 Web 事件>数据分析预览设置中增加加载结束事件，代码相同。

2.3 预览效果

1）示例一

保存模板，进行填报预览，效果如图一：

2）示例二

保存模板，进行填报预览，效果如图二：

注：经过测试，手机端和 H5 不支持该效果。

3. 模板下载

1）示例一

模板效果在线查看请点击：JS 实现鼠标经过点击单元格当前行样式示例一.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\10-JS实现鼠标经过点击单元格当前行样式示例一.cpt

点击下载模板：10-JS实现鼠标经过点击单元格当前行样式示例一.cpt

2）示例二

模板效果在线查看请点击：JS 实现鼠标经过点击单元格当前行样式示例二.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\10-JS实现鼠标经过点击单元格当前行样式示例二.cpt

点击下载模板：10-JS实现鼠标经过点击单元格当前行样式示例二.cpt

移动端怎么实现