Как добавить прослушиватель событий в каждую ячейку таблицы? - PullRequest
Новая
       12

Как добавить прослушиватель событий в каждую ячейку таблицы?

0 голосов
/ 30 сентября 2018

Допустим, у меня есть сетка, которая выглядит следующим образом (числа внутри ячейки предназначены только для маркировки, это могут быть просто пустые ячейки):

enter image description here

Написано на HTML следующим образом: 

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

Я хотел бы сделать две вещи:

  1. Добавить код JavaScript, который регистрирует номер ячейки вконсоль при нажатии на каждую ячейку.Вот как я это сделал: 
const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function () {
    console.log(i);
  });
}

Но консоль всегда возвращает значение 4 везде, где я нажимаю на таблицу.Мои вопросы:

  1. Добавляя ячейки [i] .addEventListener на каждой итерации цикла for, добавляет ли он прослушиватель событий для каждой ячейки?
  2. Почему консоль всегдавернуть 4, даже если я нажал на ячейки [0], ячейки [\ 1], ячейки [2] или ячейки [3]?
  3. Что нужно сделать, чтобы консоль вернула желаемую позицию в ячейках массиват.е. вернуть 0, если я щелкнул по ячейкам [0], вернуть 1, если я щелкнул по ячейкам [\ 1], вернуть 2, если я щелкнул по ячейкам [2], вернуть 3, если я щелкнул по ячейкам [3]?

Далее

Второе, что я хотел бы сделать, это изменить цвет каждой ячейки в зависимости от цвета, который я выбрал из палитры цветов, установленного в HTML: <input type="color" id="colorPicker">

ЗдесьВот как я это сделал: 

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;
  });
}

Но цвет ячейки не изменился.

Я не планирую использовать jQuery, я просто хотел бы использовать базовый JavaScript, который добавляетслушатель событий каждой ячейки.Я часами пытался найти выход, но в конце концов все еще не знал.Может ли кто-нибудь помочь?Я действительно ценю это, спасибо!

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Так как i увеличивается, то после завершения цикла for я == cell.length.

вместо ... 

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function () {
    console.log(i);
  });
}

использование ... 

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function (e) {
    console.log(e.target);
  });
}

И то же самое для вашего последнего примера ...

0 голосов
/ 30 сентября 2018

потому что вы используете переменную "i" в вашем обратном вызове.И «i» имеет значение: 4 в конце цикла, поэтому при нажатии кнопки обратного вызова ваше приложение использует это последнее значение.

Просто измените код на: 

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)
        );

  });
}

Идля вас второй случай на базе 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;
  });
}

живой образец

...