如何为表格中的每个单元格添加事件侦听器? [英] How to add event listener to each cell in a table?

问题描述

假设我有一个看起来像这样的网格(单元格内的数字仅用于标记，它可能只是空单元格):

用HTML编写如下:

<tr><td>0 </td><td>1 </td></tr><tr><td>2 </td><td>3 </td></tr>

我想做两件事:

1. 添加一些 JavaScript 代码，用于在单击每个单元格时将单元格编号记录到控制台.我是这样做的:

<块引用>

const cells = document.querySelectorAll('td');for (var i = 0; i 

但是无论我点击表格，控制台总是返回值 4.我的问题是:

1. 通过在 for 循环的每次迭代中添加 cell[i].addEventListener，是否为每个单元添加了一个事件监听器?
2. 为什么即使我点击了单元格[0]、单元格[\1]、单元格[2]或单元格[3]，控制台总是返回4?
3. 我应该怎么做才能让控制台返回数组单元格中的所需位置，即如果单击单元格[0] 则返回 0，单击单元格 [\1] 则返回 1，单击单元格 [2] 则返回 2]，如果我点击了单元格[3]，返回 3?

接下来，

2. 我想做的第二件事是根据我从 HTML 设置的颜色选择器中选择的颜色更改每个单元格的颜色:<input type="color" id=颜色选择器">

我是这样做的:

const cells = document.querySelectorAll('td');for (var i = 0; i 

但是单元格的颜色没有改变.

我不打算使用 jQuery，我只想使用基本的 JavaScript，为每个单元格添加一个事件侦听器.几个小时以来，我一直试图找出一些出路，但最终仍然一无所知.有人可以帮忙吗?我真的很感激，谢谢！

解决方案

因为 i 是递增的，所以在 for 循环完成后 i == cells.length.

代替...

for (var i = 0; i 

使用...

for (var i = 0; i 

对于你的后一个例子也是如此......

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:

<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:

1. Add some JavaScript code that log the number of the cell to the console when each cell is clicked. Here is how I did it:

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. My questions are:

1. By adding cells[i].addEventListener in each iteration of the for loop, does it add an event listener for each cell?
2. Why does the console always return 4 even if I clicked the cells[0], cells[\1], cells[2] or cells[3]?
3. What should I do to make the console return the desired position in the array cells, i.e. return 0 if I clicked cells[0], return 1 if I clicked cells[\1], return 2 if I clicked cells[2], return 3 if I clicked cells[3]?

Next,

2. The second thing that I would like to do is to change the colour of each cell depending on the colour that I chose from the colour picker as set by the HTML: <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. 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!

解决方案

Since i is incrementing then after the for loop is complete 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...

这篇关于如何为表格中的每个单元格添加事件侦听器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！