鼠标移动到table,使其在鼠标下面的行高亮显示。

来源:互联网 发布:天启四骑士知乎 编辑:程序博客网 时间:2024/06/06 15:38

///////////////////////////////////////////////////////////////////////////////
//
// 功能:这个类使得被附加的表格可以支持行点击高亮
// 参数:
//            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;
    var _thisTable = tbl;
    tbl.attachEvent("onmousemove",table_onMouseMove)
    tbl.attachEvent("onmouseout",table_onMouseOut)
   
    function table_onMouseMove() {
        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;
    }
   
    function table_onMouseOut() {
        var e = event.srcElement;
        if (e.tagName == 'TD')
            e = e.parentElement;           
        if (e.tagName != 'TR') return;
        var count=0;
        for(;count<_thisTable.rows.length;count++)
        {
            if(e==_thisTable.rows[count])
                break;
        }
        if(count%2 ==0)
            e.runtimeStyle.backgroundColor = 'EBF3FB';
        else
            e.runtimeStyle.backgroundColor = '';
    }

<script language="javascript" type="text/javascript">
// 调用范例,要写在页面的最下面,保证table已经产生,否则document.getElementById('table1')==null

var mytable = document.getElementById('table1');
var count=0;
for(;count<mytable.rows.length;count++)
{
    if(count%2 ==0)
        mytable.rows[count].runtimeStyle.backgroundColor = 'EBF3FB';
    else
        mytable.rows[count].runtimeStyle.backgroundColor = '';   
}
//调用所编辑的类,使得其响应鼠标事件。
var hilighter1 = new TableRowHilighter(document.getElementById('table1'), 1, '#FFDB77');

</script>

 

/************************************ANOTHER***************************************

function highlightRow(objRow)
    {
//        objRow.bgColor = "red";
        objRow.runtimeStyle.backgroundColor = "red";
    }
   
    function unhighlightRow(objRow)
    {
//        objRow.bgColor = "";
        objRow.runtimeStyle.backgroundColor = "";
    }

原创粉丝点击