是否可以通过单击最后一列上的按钮从 table 中的第一列获取 innerhtml 值

Question

table 在每一行的末尾都有一个废纸篓按钮，我需要在单击废纸篓按钮时获取该行第一列的值。

现在我正尝试在 for 循环中使用 .queryselectorAll 获取值，以将事件监听器添加到按钮。

这就是 table 的样子：

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

这里有两个问题：

i 不会是您在回调中期望的值，因为您在循环外声明了它。请参阅此问题的答案以了解原因，但基本上，您会将 let 放在和 for 语句中，以使 i 成为您的事件处理程序关闭与处理程序相关。但是，没有必要，只需在处理程序中使用this即可。
您依赖 .js-name 元素的数量与 .js-listendelete 元素的数量完全相同。也许那是可靠的，但是有一个 more 可靠的方法。

并且可选：

将处理程序直接挂接到元素是脆弱的；如果以后添加更多的元素，你要记得把它们挂起来。

我要做的是使用 事件委托 然后遍历 DOM:

事件委托：在table（或tablebody）上挂钩click，然后查看事件是否通过.js-listendelete 元素在通往 body 的路径上，因为它 ubbled。
遍历 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
        }
    }
});

在 event.target 上使用 closest 来查找点击开始或经过的 .js-listendelete。如果它 returns 非 null，那么我们确保它找到的内容在 table (this.contains(delButton)) 之内。然后我们找到包含它的行及其第一个单元格。（如果你愿意，你可以使用 .cells[0] 而不是 .querySelector("td")。那些 1990 年代风格的访问器已经标准化。）

然后你只有一个事件处理程序，在 table 上，它处理所有按钮，并通过在 DOM 树中工作来处理它们而不是假设节点的平行列表真的是平行的。

请注意 closest 是 模糊的 现代，您可能需要一个 polyfill，具体取决于您的目标浏览器。

是否可以通过单击最后一列上的按钮从 table 中的第一列获取 innerhtml 值

Is it possible to get the innerhtml value from the first column in the table by clicking on a button on the last column

javascript

innerhtml