Question

该表在每行的末尾都有一个废纸bas按钮，单击废纸ket按钮时，我需要具有该行第一列的值。

现在，我正在尝试在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)

    })
  }

我需要在单击的按钮的相应行上具有第一列的值

Answer 1

那里有两个问题：

i将不是您在回调中期望的值，因为您在循环之外声明了它。请参阅此问题的答案，以了解为什么，但是基本上，您将let放在for 内，以便使i事件处理程序结束与处理程序有关。但是，没有必要，只需在处理程序中使用this。
您所依赖的.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很现代，根据目标浏览器的不同，可能需要使用polyfill。

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

1 个答案: