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

Question

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

当我的目标是从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 = tableBodies.getElementsByTagName("td");
    }

    function undoHighlight(){

    }

Answer 1

您是否尝试过使用CSS,例如

tr:hover{
 background:red;
}

如果你想使用jQuery,有一个相当不错的演练在这里,如果你想纯JS-看看这里下的部分"使用鼠标事件处理程序和行检测"