清單記錄自動逐條高亮顯示

通常我們在浏覽網頁的時候經常會看到多行熱點資訊清單資料，會每隔幾秒鐘在頁面上就會順次高亮顯示連結标題的效果。

這種效果在我們的業務系統中也比較常見，比如企業儀表盤中部分區塊的清單資料，網格式報表中。

在報表展現的頁面中，如何能讓所有資料行在指定的時間間隔内自動順次高亮顯示呢？還有如何做到無閃爍重新整理頁面來改變行的顔色呢？

下面我以設計器下報表執行個體網格式報表.rpx 為例具體說下實作方法。

這張報表原來有靜态的隔行異色的設定，為了更友善看到我們實作的最終效果，這裡我删除了原報表中第 5 行的背景色表達式的設定。

在報表展現的頁面 showReport.jsp 中增加标簽屬性 generateCellID=”yes”, 目的是讓報表在頁面生成的時候每個格子都帶有 ID，我們可以通過 ID 來擷取到對應的格子來改變格子的樣式效果。

在頁面中增加 JS 方法。

浏覽式報表初次加載的時候我們從資料區的第一行開始改變，目前行的行号也會自動增加，将變化的行号使用 setAttribute 儲存，通過 JS 中的 setTimeout()每隔 3 秒鐘回調 changeColor()，通過 getAttribute 取到變化的行号，再順次改變目前行的顔色，當到最後一行後，再從資料區的第一行開始改變顔色。

var hcolor = "CornflowerBlue";
function changeColor(){
    var tbl = document.getElementById("report1");
    var currow = tbl.getAttribute( "currow" );

    if( currow != null ) {
        currow = parseInt( currow );
        
        var colLen = tbl.rows[currow].cells.length;
        for( var i = 0; i < colLen; i++ ){
            tbl.rows[currow].cells[i].style.backgroundColor = "white";
            tbl.rows[currow].cells[i].style.color="black"
        }
    }
    else currow = 3;
    currow++;
    if( currow == tbl.rows.length ) currow = 4;
    var cols = tbl.rows[currow].cells.length;
    for( var i = 0; i < cols; i++ ){
        tbl.rows[currow].cells[i].style.backgroundColor = hcolor;
        tbl.rows[currow].cells[i].style.color="white"
    }
    tbl.setAttribute( "currow", currow + "" );
    setTimeout( changeColor, 3000 );           

}

changeColor();

通過以上步驟我們就已經實作了清單式報表每隔三秒鐘從第一行資料區到最後一行順次的高亮顯示，在頁面中可以友善使用者避免看錯行能更準确的看到清單資料，這樣的效果在多區塊的頁面中也可以有效的引導使用者檢視。

除了上面介紹的這種頁面自動高亮顯示清單記錄的效果外，還有靜态的隔行異色的效果，具體實作可以參考文 頁面表格怎麼實作隔行異色、隔行變色 ；如果不想頁面記錄自動來高亮顯示，還可以參考這篇文 滑鼠移入報表時高亮顯示所在行 ，實作滑鼠指向時資料高亮顯示的效果哦！