表格行高亮显示实现为一个 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 事件处理逻辑。