我使用 Javascript 创建了一个动态表。现在我想做的是对于动态生成的每个单元格，有一个 onmouseover 事件会更改该特定单元格的背景颜色。
我遇到的问题是，当我生成表格并尝试对每个动态生成的单元格使用 onmouseover 函数时，该函数仅适用于最后生成的单元格。
这是我的代码的副本。 （注：我只在 Chrome 上测试过）
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: center;
}
</style>
<script type="text/javascript">
var table;
function init(){
table = document.getElementById("mytable");
}
function makeCells(){
init();
for(var a=0;a<20;a++){
var row = table.insertRow(-1);
for(var b=0;b<20;b++){
cell = row.insertCell(-1);
cell.innerHTML = a*b;
cell.onmouseover = function(){cell.style.backgroundColor = "yellow";};
}
}
}
</script>
</head>
<body onload="javascript: makeCells();">
<table id="mytable"></table>
</body>
</html>如有任何建议，我们将不胜感激。
一些改进。我要改变的三件事：
不要使用 javascript 编辑内联样式。相反，添加或删除一个类。请参阅#3。
不要在“onload”、“onmouseover”中执行如此多的事件处理程序。最好添加一个事件监听器。
一次性添加所有新元素而不是单独添加，性能会更好。请参阅这篇文章：https://developers.google.com/speed/articles/reflow
这里有一种优化Javascript的方法：
HTML
<table id="table"></table>
CSS
body {
padding: 40px;
}
.yellow {
background: yellow;
}
td {
padding: 10px 20px;
outline: 1px solid black;
}
JavaScript
function propegateTable() {
var table = document.getElementById("table");
//will append rows to this fragment
var fragment = document.createDocumentFragment();
for(var a=0; a<10; a++){ //rows
//will append cells to this row
var row = document.createElement("tr");
for(var b=0;b<5;b++){ //columns
var cell = document.createElement("td");
cell.textContent = a + ", " + b;
// event listener
cell.addEventListener("mouseover", turnYellow);
row.appendChild(cell);
}
fragment.appendChild(row);
}
//everything added to table at one time
table.appendChild(fragment);
}
function turnYellow(){
this.classList.add("yellow");
}
propegateTable();
http://codepen.io/ScavaJritter/pen/c3f2484c0268856d3c371c757535d1c3
实际上我自己在代码中找到了答案。
行中：
cell.onmouseover = function(){cell.style.backgroundColor = "yellow";};
我把它改为：
cell.onmouseover = function(){this.style.backgroundColor = "yellow";};
使用内联事件处理程序通常不是一个好主意。
使用事件委托（ED），您只需要分配一个处理程序一次。 ED 的另一个优点可能是您可以在表行/单元格存在之前分配处理程序。
在示例中，mouseover
被替换为 css
:hover伪类。使用上述 ED 为表格单元格分配点击处理程序。
document.addEventListener(`click`, handle);
makeCells(document.querySelector(`#mytable`));
function handle(evt) {
// only handle when the target is a table cell
// AND it's a cell from table#mytable
if (evt.target.closest(`td`).closest(`#mytable`)) {
evt.target.classList.toggle(`selected`);
}
}
function makeCells(forTable) {
for (let a = 0; a < 20; a +=1 ) {
forTable.insertRow(-1);
}
[...forTable.rows].forEach( (row, i) => {
for (let b = 0; b < 10; b += 1) {
row.insertAdjacentHTML(`beforeend`, `<td>r${i}/c${b}</td>`);
}
})
}table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: center;
cursor: pointer;
}
td:hover {
color: blue;
}
td.selected {
background-color: #c0c0c0;
}<table id="mytable"></table>