时间戳

首页 > 解决方案 > 是否可以通过单击最后一列上的按钮从表中的第一列获取 innerhtml 值

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

问题描述

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

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

这是表格的样子：

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)

    })
  }

我需要在被点击的按钮的相应行上获得第一列的值

标签： javascriptinnerhtml

解决方案

那里有两个问题：

  1. i不会是您在回调中期望的值，因为您在循环之外声明了它。请参阅此问题的答案以了解原因，但基本上，您会将语句放在语句let 内部，for以使i您的事件处理程序关闭与处理程序相关。但是，没有必要这样做，只需this在处理程序内部使用即可。

  2. 您依赖的元素数量与.js-name元素数量完全相同.js-listendelete。也许那是可靠的，但有一种更可靠的方法。

并且可以选择：

  1. 将处理程序直接连接到元素是脆弱的；如果稍后添加更多元素，则必须记住将它们连接起来。

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

  • 事件委托：挂钩click表（或表体），然后查看事件是否通过.js-listendelete路由到正文的元素，因为它是 ubbled。

  • 遍历 DOM：如果是这样，我会使用parentNodeorclosest()上一行，然后获取该行的 first 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。如果它返回 non- ，那么我们确保它找到的内容在表 ( ) 中。然后我们找到包含它的行及其第一个单元格。（如果你喜欢，你可以使用代替. 那些 1990 年代风格的访问器已经被标准化了。）event.target.js-listendeletenullthis.contains(delButton).cells[0].querySelector("td")

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

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

推荐阅读