小编mei*_*ger的帖子

使用Javascript和CSS在鼠标悬停上突出显示表格的行

下面是我正在使用的功能,以突出显示悬停在上面的行.

当我的目标是从stripe_table类中选择tbodies时,我无法理解如何实现这一点.一旦将其设置为事件侦听器,我需要让a和td nodeNames响应mouseover事件,从而突出显示其父行.

有人可以解释一下可以实现这一目标的步骤吗?我如何从悬停的a或td元素遍历DOM以找到其父行?

谢谢!

在mouseover上将tbody设置为eventlistener,mouseout对a和td元素做出反应 - >修改tr - 查找目标元素的祖先表行 - 然后将突出显示应用于该表行 - 要遍历DOM运行一个循环将event -target元素重置为其父节点,直到--parent的节点名称等于On mouseout事件,需要恢复格式化*/

//Set up Hover Events

function addEvent( obj, type, fn ) {

    if ( obj.attachEvent ) {
         obj['e'+type+fn] = fn;
         obj[type+fn] = function(){obj['e'+type+fn] ( window.event );}
         obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
         obj.addEventListener(type, fn, false);
    }

    function setUpFieldEvents(){
         var stripeTables = document.getElementsByClassName("stripe_table");
         var tableBodies = stripeTables.tBodies;

             addEvent(tableBodies, "mouseover", hoverHighlight);
             addEvent(tableBodies, "mouseout", undoHighlight);
    }

    function hoverHighlight(){
            var stripeTables = document.getElementsByClassName("stripe_table");
            var tableBodies = stripeTables.tBodies;
            var tableData …
Run Code Online (Sandbox Code Playgroud)

html javascript css

3
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×1

html ×1

javascript ×1