常用数据行变色操作方法

概述

如上格式的报表，当数据行数多了，在核对数据的时候，能够看不错行还是挺有难度的眼力活儿。 所以，为了避免这种考眼力的情况发生，还是要给报表加点小技巧的。

常见的方式是增加隔行异色的功能，这部分不论是哪个报表工具，基本都有介绍，比如润乾报表： 报表设计技巧之隔行异色 ](http://c.raqsoft.com.cn/article/1533022149478?r=bubblegum) 。这种方式虽然基本解决了看错行的情况，不过页面搞的有点像斑马，视觉上看久了也挺累，不保证眼不花，并且这种固定的隔行异色也显得没那么高大上。

那么，有没有其他的替代方式，既能高亮当前查看行，还能想让谁亮谁才亮？

答案肯定是有，比如今天我们要介绍的两种：

1、 当鼠标移入某行时，当前行且仅当前行高亮显示；

2、 当鼠标点击某行时，当前行且仅当前行高亮显示

这俩看似一样，但实现方式稍有不同，并且实际应用中，也经常有用户提到这两种方式要怎么实现？

方法说明

鼠标移入或点击实现当前行高亮，实际是通过 js 事件改变当前行单元格的样式（css）。知道了基本的解决思路，那么鼠标移入即 onMouseMove，移出（移出当前行要改为原样式）即 onMouseOut。同样，鼠标点击为 onClick，这里要同时做两个事情，一个是点击行实现高亮（改变背景色，如蓝色），二是要把前一个点击的行改为原样式。

具体实现

这里通过网格式报表（如概述中图示）添加效果。

报表准备

基于润乾报表自带 demo 数据库的订单表，准备如概述中报表。

报表定义为：

其中第一行为标题行，第二行为取数行。

Web 端展现效果如

鼠标移入移出方式实现

1、 为第二行增加 html 事件

选中第二行，找到右侧属性 html 事件，并定义值为：

οnmοuseοver=‘changeStyle(this)’ οnmοuseοut=‘changeBackStyle(this)’

2、 Jsp 内定义 js 函数

function changeStyle(obj){

var row = obj.parentNode;

for(var i=0;i<row.cells.length;i++){

// 重点：将当前行的每个单元格背景色都改变

row.cells[i].style.background =‘#0099ff’;

}

}

function changeBackStyle(obj){

var row = obj.parentNode;

for(var i=0;i<row.cells.length;i++){

// 重点：鼠标移出后将背景色改为原色

row.cells[i].style.background=‘white’;

}

}

3、 看效果（gif）

鼠标点击当前行方式实现

1、 为第二行增加 html 事件

选中第二行，找到右侧属性 html 事件，并定义值为：

onClick=‘changeStyle(this)’

这里仅需要一个事件，同时完成点击行和上一次点击行的背景色改变。

2、 Jsp 内定义 js 函数

var hRow = null;

//hRow 记录历史点击行，即上一次点击的行

function changeStyle(obj){

var row = obj.parentNode;

for(var i=0;i<row.cells.length;i++){

// 这里是改变点击行的背景色

row.cells[i].style.background =‘#0099ff’;

}

// 重点：当已经点过其他行时，将其背景色改回

if(hRow!=null){

for(var i=0;i<hRow.cells.length;i++){

hRow.cells[i].style.background=‘white’;

}

}

// 将当前点击行记录为历史行

hRow = row;

}

3、 看效果（gif）

由此可见，因报表生成是标准的 html 脚本，所以对于一些特殊的前端效果，我们可以考虑借助 js+css 来实现，这也是一旦遇到前端问题时考虑的方向，并且常规实现起来也并没那么复杂。