表格行高亮显示实现为一个 js 类

< HTML >

< HEAD >

< TITLE ></ TITLE >

< script language = " javascript " >

// /

//

//  功能：这个类使得被附加的表格可以支持行点击高亮

//  参数：

//             tbl:                要附加样式的 table.

//             selectedRowIndex:    初始高亮的行的索引(从 0 开始). 此参数可省。

//             hilightColor:        高亮颜色。可省（默认为绿色）

//

//  Author:    Neil Chen

//  Date:    2005-09-05

//

// /

function  TableRowHilighter(tbl, selectedRowIndex, hilightColor) {

     this .currentRow  =   null ;

     this .hilightColor  =  hilightColor  ?  hilightColor : 'green';    

     if  (selectedRowIndex  !=   null  

         &&  selectedRowIndex  >=   0  

         &&  selectedRowIndex  <  tbl.rows.length) 

    {

         this .currentRow  =  tbl.rows[selectedRowIndex];        

        tbl.rows[selectedRowIndex].runtimeStyle.backgroundColor  =   this .hilightColor;

    }

     var  _this  =   this ;

    tbl.attachEvent( " onclick " , table_onclick);    

     function  table_onclick() {

         var  e  =  event.srcElement;        

         if  (e.tagName  ==  'TD')

            e  =  e.parentElement;            

         if  (e.tagName  !=  'TR')  return ;

         if  (e  ==  _this.currentRow)  return ;        

         if  (_this.currentRow)

            _this.currentRow.runtimeStyle.backgroundColor  =  '';

        e.runtimeStyle.backgroundColor  =  _this.hilightColor;

        _this.currentRow  =  e;

    }

}

</ script >

</ HEAD >

< BODY >

< table id = " table1 "  border = " 1 "  cellspacing = " 0 "  cellpadding = " 5 " >

     < tr >

         < td onclick = " alert('a'); " > a </ td >

         < td > b </ td >

         < td > c </ td >

     </ tr >

     < tr >

         < td > d </ td >

         < td > e </ td >

         < td > f </ td >

     </ tr >

     < tr >

         < td > g </ td >

         < td > h </ td >

         < td > i </ td >

     </ tr >

</ table >

< br >

< table id = " table2 "  border = " 1 "  cellspacing = " 0 "  cellpadding = " 5 " >

     < tr >

         < td > a </ td >

         < td > b </ td >

         < td > c </ td >

     </ tr >

     < tr >

         < td > d </ td >

         < td > e </ td >

         < td > f </ td >

     </ tr >

     < tr >

         < td > g </ td >

         < td > h </ td >

         < td > i </ td >

     </ tr >

</ table >

< br >

< table id = " table3 "  border = " 1 "  cellspacing = " 0 "  cellpadding = " 5 " >

     < tr >

         < td > a </ td >

         < td > b </ td >

         < td > c </ td >

     </ tr >

     < tr >

         < td > d </ td >

         < td > e </ td >

         < td > f </ td >

     </ tr >

     < tr >

         < td > g </ td >

         < td > h </ td >

         < td > i </ td >

     </ tr >

</ table >

</ BODY >

< script >

//  调用范例

var  hilighter1  =   new  TableRowHilighter(document.getElementById('table1'),  1 , 'yellow');

var  hilighter2  =   new  TableRowHilighter(document.getElementById('table2'),  0 , 'lightsteelblue');

var  hilighter3  =   new  TableRowHilighter(document.getElementById('table3'),  2 );

</ script >

</ HTML >

其中行点击的事件处理用的是 attachEvent 方法，因此不支持 IE 5.5 以下的浏览器，以及非 IE 浏览器。但有一个好处就是该高亮功能不影响 HTML 元素中原有的 onclick 事件处理逻辑。