• 表格行高亮显示实现为一个 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 事件处理逻辑。
  • 相关阅读:
    第三百三十二节,web爬虫讲解2—Scrapy框架爬虫—Scrapy使用
    trim思考
    国王验毒酒问题
    有人在群里问mysql如何选择性更新部分条件的问题
    有人在群里问 20180222055怎么转20180222-055 这样的问题
    如何下载腾讯视频的视频转为MP4常用格式视频
    天气预报的大雪真的下了
    群友面试的问题 我搞笑的帮忙回答一下
    电台大神打油诗
    ajax简单手写了一个猜拳游戏
  • 原文地址:https://www.cnblogs.com/RChen/p/230567.html
Copyright © 2020-2023  润新知