下面是我正在使用的功能,以突出显示悬停在上面的行.
当我的目标是从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)