Можно ли получить значение innerhtml из первого столбца таблицы, нажав кнопку в последнем столбце

Question

Таблица имеет в конце каждой строки кнопку корзины для мусора, мне нужно иметь значение из первого столбца в этой строке, когда нажимается кнопка корзины для мусора.

Теперь я пытаюсь получить значение с помощью .queryselectorAll в цикле for, чтобы добавить обработчики событий к кнопкам.

Вот как выглядит таблица:

const verwerkDatatable = function(data) {
  console.log(data);
  const table = document.querySelector('.js-table');
  table.innerHTML = `<tr class="js-table-header">
  <td>Naam:</td>
  <td>Toevoegdatum:</td>
  <td>Vervaldatum:</td>
  <td>Aantal:</td>
  <td class="js-delete">Verwijderen:</td>
</tr>`;
  for (let object of data) {
    const amount = object.amount;
    const name = object.name;
    const addDate = object.date;
    const exDate = object.expirationDate;
    table.innerHTML += `<tr>
  <td class="js-name">${name}</td>
  <td>${addDate}</td>
  <td>${exDate}</td>
  <td>${amount}</td>
  <td class="js-delete js-listendelete"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 8v16h18v-16h-18zm5 12c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm4-15.375l-.409 1.958-19.591-4.099.409-1.958 5.528 1.099c.881.185 1.82-.742 2.004-1.625l5.204 1.086c-.184.882.307 2.107 1.189 2.291l5.666 1.248z"/></svg></td>
</tr>`;
  }
  listenToTrash();
};

Вот как я пытаюсь получить значение из первой строки:

const listenToTrashes = function(){
  const listendel = document.querySelectorAll('.js-listendelete')
  const name = document.querySelectorAll('.js-name')
  let i
  for (i = 0; i < listendel.length; i++) {
    listendel[i].addEventListener('click', function(){
      console.log('click')
      console.log(name[i].innerHTML)

    })
  }

Мне нужно иметь значение первого столбца в соответствующей строке нажатой кнопки

Answer 1

Здесь есть две проблемы:

1. i не будет значением, которое вы ожидаете в обратном вызове, потому что вы объявили его вне цикла.Посмотрите ответы на этот вопрос, чтобы узнать, почему, но, по сути, вы бы поместили let внутри for, чтобы сделать так, чтобы i ваши обработчики событий были близки к обработчику. Но , в этом нет необходимости, просто используйте вместо этого this внутри обработчика.

2. Вы полагаетесь на количество элементов .js-name, которые должны бытьточно так же, как количество элементов .js-listendelete.Может быть, это надежно, но есть больше надежный способ.

И дополнительно:

Привязка обработчиков непосредственно к элементам хрупка;если вы добавите больше элементов позже, вам нужно не забыть подключить их.

Вместо этого я бы использовал делегирование события , а затем обошел DOM:

• Делегирование события: перехватите click на таблице (или теле таблицы), а затем посмотрите, прошло ли событие через элемент .js-listendelete на пути к телу в момент его убирания.

• Обход DOM: Если это так, я бы использовал parentNode или closest(), чтобы подняться на строку, а затем получить первый td.

Вот идея, на что это было бы похоже:

document.querySelector("selector-for-your-table").addEventListener("click", function(event) {
    const delButton = event.target.closest(".js-listendelete");
    if (delButton && this.contains(delButton)) {
        const firstCell = delButton.closest("tr").querySelector("td");
        if (firstCell) {
            // Use firstCell.innerHTML here
        }
    }
});

Использует closest на event.target, чтобы найти .js-listendelete, в котором щелчок начался или прошел.Если он возвращает не null, мы гарантируем, что найденное находится в таблице (this.contains(delButton)).Затем мы находим строку, содержащую его и его первую ячейку.(Если хотите, вы можете использовать .cells[0] вместо .querySelector("td"). Эти средства доступа стиля 1990-х годов были стандартизированы.)

Тогда у вас есть только один обработчик событий в таблице,который обрабатывает все кнопки и обрабатывает их, работая внутри дерева DOM, а не предполагает, что параллельные списки узлов действительно параллельны.

Обратите внимание, что closest равно неопределенно современный, вам может понадобиться полифилл в зависимости от ваших целевых браузеров.