[英]How to add event listener to each cell in a table?
Let's say I have a grid that looks like this (the numbers inside the cell is just for labeling, it could just be empty cells): 假设我有一个看起来像这样的网格(单元格中的数字仅用于标记,它可能只是空单元格):
Written in HTML as follows: 用HTML编写,如下所示:
<table>
<tr>
<td>0 </td>
<td>1 </td>
</tr>
<tr>
<td>2 </td>
<td>3 </td>
</tr>
</table>
There are two things that I would like to do: 我想做两件事:
const cells = document.querySelectorAll('td'); for (var i = 0; i < cells.length; i++) { cells[i].addEventListener('click', function () { console.log(i); }); }
But the console always returns the value 4 wherever I click the table. 但是,无论我在哪里单击表,控制台始终返回值4。 My questions are:
我的问题是:
Next, 下一个,
<input type="color" id="colorPicker">
<input type="color" id="colorPicker">
Here is how I did it: 这是我的做法:
const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener('click', function () {
const color = document.querySelector('#colorPicker').value;
cells[i].style.backgroundColor = color;
});
}
But the colour of the cell did not change. 但是细胞的颜色没有改变。
I don't plan to use jQuery, I would just like to use basic JavaScript that add an event listener to each cell. 我不打算使用jQuery,我只想使用向每个单元格添加事件侦听器的基本JavaScript。 I have tried to figure some ways out for hours but still clueless in the end.
我已经尝试了数小时的出路,但最终还是一无所知。 Could somebody please give some help?
有人可以帮忙吗? I really appreciate it, thanks!
非常感谢,谢谢!
is because you use "i" variable on your callback. 是因为您在回调中使用了“ i”变量。 And "i" have value : 4 at the end of your loop, so when you click callback, your app use this last value.
而且“ i”在循环的末尾具有值:4,因此,当您单击回调时,您的应用程序将使用最后一个值。
Just change your code by : 只需通过以下方式更改代码:
const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
console.log(cells[i].innerText);
cells[i].addEventListener('click', (event) => {
console.log(event.target.innerText); // Take the text node from the element who fire the click event.
// If you don't want to use innerText, you can do like this.
console.log(
//We transform querySelectorAll to traversable array. Then we find index of current event target.
Array.from(document.querySelectorAll('td')).findIndex(e => e === event.target)
);
});
}
And for you second case base on colorPicker : 第二种情况是基于colorPicker的:
const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener('click', function (event) {
const color = document.querySelector('#colorPicker').value;
event.target.style.backgroundColor = color;
});
}
Since i is incrementing then after the for loop is complete i == cells.length. 由于i正在递增,因此在for循环完成之后,i == cells.length。
in place of... 代替...
for (var i = 0; i < cells.length; i++) { cells[i].addEventListener('click', function () { console.log(i); }); }
use... 采用...
for (var i = 0; i < cells.length; i++) { cells[i].addEventListener('click', function (e) { console.log(e.target); }); }
And the same for your latter example... 对于后面的示例也是如此...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.