如何定位通过JavaScript创建的孩子的孩子的节点？

Question

我正在用JavaScript创建一个表。 它位于具有名称的Div中。 它创建一个表，该表创建一个tbody，然后该tbody具有多个td和tr。

我正在尝试使用事件监听器定位那些td和tr，以便当我将它们悬停在它们上时，它们会切换背景颜色。

我已经尝试了几件事，在代码中放了两个。

是的，我该如何定位JavaScript创建的单元格并使它们在悬停时改变颜色？

HTML

<div id="padDiv">
    <!-- The JS pad goes here -->
</div>

Javascript＃1

table.addEventListener("mouseover", () => {
    event.target.style.backgroundColor = "block";
})

/* The code that creates the td and tr has this in it: */

let tbl = document.createElement("table");
let table = document.getElementsByClassName("table");
padDiv.appendChild(tbl);

Javascript＃2

let table = document.getElementsbyId("padDiv").childNodes[0];

table.addEventListener("mouseover", () => {
    event.target.style.backgroundColor = "block";
})

我认为那最后一个是有道理的，因为使用...

padDiv.addEventListener("mouseover", () => {
    event.target.style.backgroundColor = "block";
})

允许我按自己的意愿给单元格上色，但是如果我将鼠标悬停在div上但没有被单元格（边距）占据的区域上，整个div就会变黑。

所以，是的，考虑到创建页面时具有名称的最后一件东西是padDiv，我如何定位在表旁边创建的td和tr？

编辑：颜色需要一直停留到我按下重置按钮。

Answer 1

这是一种通过在tbody中的每个td元素上附加一个“ mouseenter”侦听器来更改背景颜色的方法。 它使用表的ID进行挖掘并找到所有将侦听器应用到的相关元素。

当您想清除背景色时，只需在单元格中循环，然后将其背景色设置回“初始”即可。

 var table = document.getElementById("StickyHighlight"); var body = table.getElementsByTagName("tbody"); var cells = body[0].getElementsByTagName("td"); function addHoverListener() { for(var i = 0; i < cells.length; i++) { cells[i].addEventListener("mouseenter", (e) => { e.target.style.background = "cyan"; }); } } function reset() { for(var i = 0; i < cells.length; i++){ cells[i].style.background = "initial"; } } addHoverListener(); 

 thead { background: black; color: white; } 

 <button onclick="reset()">Reset</button> <table id="StickyHighlight"> <thead> <tr> <td>Col 1</td> <td>Col 2</td> <td>Col 3</td> </tr> </thead> <tbody> <tr> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> </tr> <tr> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> </tr> <tr> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> </tr> </tbody> </table>