改变浏览式报表的行的背景色

有些浏览式报表的的数据量比较大，数据行也比较多。当肉眼在看这些数据的时候，可能会出现“误读”的现象，即将第N行的ID与第N+1行的NAME给对应起来了。为了最大限度的避免这种情况的出现，可以让鼠标的焦点位于该行的时候，改变该行的背景色。

下面我们一起来看一下如何实现当鼠标焦点位于某行是改变该行的背景色：

首先在发布报表的JSP中定义两个js：

function changeColor(selColor){

//alert(selColor);

var getColor = selColor;

//alert(getColor);

var intColor = parseInt(getColor);

//设置行背景色

var colLen = document.getElementById(“report1″).rows[intColor-1].cells.length;

for(var i=0;i<colLen;i++){

document.getElementById(“report1″).rows[intColor-1].cells[i].style.backgroundColor=”pink”;

}

}

 

function changeColor1(selColor){

//alert(selColor);

var getColor = selColor;

//alert(getColor);

var intColor = parseInt(getColor);

//设置行背景色

var colLen = document.getElementById(“report1″).rows[intColor-1].cells.length;

for(var i=0;i<colLen;i++){

document.getElementById(“report1″).rows[intColor-1].cells[i].style.backgroundColor=”white”;

}

}

然后定义一张报表，如下图：

选中A2这一整行，在右边属性栏中找到“HTML事件”，在其表达式中写：

“onMouseMove=changeColor(“+row()+”) onMouseOut=changeColor1(“+row()+”)”

将行号传给changeColor（selColor）和changeColor1（selColor）。

浏览报表如下图：

随便将鼠标放到一行，则该行的背景色变成粉红色。这样的话就很难看错，出现误读数据的情况了。

注意：不要将HTML事件中的onMouseMove改成onMouseOver，因为报表的单元格在初始化的时候就已经有了一个onmouseover=”report1416542over()”，如果用onMouseOver则会冲突，导致某些行的背景色不能快速灵活的改变，而是要通过反复的改变鼠标焦点才能改变。