使用Javascript表格行鼠标拖动效果

-1

我想在使用Javascript的表格行上执行一个mouseover事件。我明白CSS会更好地完成这项任务，但我想了解如何在Javascript中完成它。使用Javascript表格行鼠标拖动效果

这里是我的代码：

var tableRows = document.getElementsByTagName('tr'); 
 
tableRows.addEventListener("mouseover", rollOver); 
 

 
function rollOver() { 
 
    alert('you scrolled over a table row'); 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     Cell 1 
 
    </td> 
 
    <td> 
 
     Cell 2 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     Cell 3 
 
    </td> 
 
    <td> 
 
     Cell 4 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     Cell 5 
 
    </td> 
 
    <td> 
 
     Cell 6 
 
    </td> 
 
    </tr> 
 
</table>

CONSOLE.LOG似乎表明 “的addEventListener” 是不是一个函数。我在这里做错了什么？有什么想法吗？

谢谢！

来源

2017-04-10 Brixsta

的'.getElementsByTagName（）'函数返回元素的列表。该列表对象没有'.addEventListener（）'方法。您必须迭代列表并在列表中的单个DOM元素上调用该函数。附加的副本不是关于mouseovers或tr元素的，但是尝试将'.addEventListener（）'应用于列表的问题是相同的问题，所以解决方案与您所需的相同。 – nnnnnn

由于tableRows将返回对象阅读进度不会与它的工作...所以他们的循环和使用将..

var tableRows = document.getElementsByTagName('tr'); 
 

 
for (var i = 0; i < tableRows.length; i += 1) { 
 
    tableRows[i].addEventListener('mouseover', function(e){ 
 
    console.log("sdsd"); 
 
    }); 
 
    // or attachEvent, depends on browser 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     Cell 1 
 
    </td> 
 
    <td> 
 
     Cell 2 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     Cell 3 
 
    </td> 
 
    <td> 
 
     Cell 4 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     Cell 5 
 
    </td> 
 
    <td> 
 
     Cell 6 
 
    </td> 
 
    </tr> 
 
</table>

来源

2017-04-10 07:29:11

使用Javascript表格行鼠标拖动效果

回答

相关问题