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

最新推荐文章于 2020-07-10 15:32:59 发布

原创最新推荐文章于 2020-07-10 15:32:59 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #function #javascript #null #date

Javascript 专栏收录该内容

43 篇文章

订阅专栏

这段代码展示了如何创建一个JavaScript类`TableRowHilighter`，该类用于监听表格的鼠标事件，当鼠标移动到表格行上时，该行会高亮显示。作者Neil Chen在2005年9月5日编写了这个功能，允许指定初始高亮行和自定义高亮颜色。此外，还提供了辅助函数`highlightRow`和`unhighlightRow`用于手动控制行的高亮状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

///////////////////////////////////////////////////////////////////////////////
//
// 功能：这个类使得被附加的表格可以支持行点击高亮
// 参数：
//            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 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 = "";
    }