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

posted on 2005-09-05 17:45  NeilChen  阅读(...)  评论(...编辑  收藏

导航

统计