Question

我有一张这样的表：

<table>
    <th>
        <!--the table heading-->
        <td>id</td>
        <td>type</td>
        <td>Price</td>
        <td>examine</td>
    </th>
    <tr>
        <td>0</td>
        <td>Book</td>
        <td>500</td>
        <button>examine</button> <!-- onclick, get the id value 0 -->
    </tr>
    <tr>
        <td>1</td>
        <td>Clothing</td>
        <td>30</td>
        <button>examine</button> <!-- onclick, get the id value 1 -->
    </tr>
    <tr>
        <td>2</td>
        <td>Food</td>
        <td>400</td>
        <button>examine</button> <!-- onclick, get the id value 2 -->
    </tr>
    <!--...
    there are 100 rows-->
    <tr>
        <td>99</td>
        <td>Book</td>
        <td>300</td>
        <button>examine</button> <!-- onclick, get the id value 99 -->
    </tr>
</table>

我想向按钮添加一个eventListener，当我单击该按钮时，它将获得相应的id值作为函数中的参数传递。如何在不使用JQuery的情况下完成这项工作？

Answer 1

为了做到这一点，首先需要从按钮上升到祖先TR（如果有的话），然后获取第一个单元格的文本内容，例如

// Starting at el, get ancestor with tagName
// If no such ancestor, return null
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();
  while (el.parentNode && el.parentNode.tagName) {
    el = el.parentNode;
    if (el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}

// Add click listener to all buttons
window.onload = function() {
  [].forEach.call(document.querySelectorAll('button'),function(button) {
    button.addEventListener('click',function() {
      // Get the ancestor row
      var row = upTo(this, 'tr');
      if (row) {
        // If there is a first cell, log it's textContent
        console.log(row.cells[0] && row.cells[0].textContent);
      }
    },false);
  });
}

<table>
    <tr><th>id<th>type<th>Price<th>examine
    <tr><td>0<td>Book<td>500<td><button>examine</button>
    <tr><td>1<td>Clothing<td>30<td><button>examine</button>
</table>

这会将侦听器添加到所有按钮，您可能希望限制它。还修复了HTML以将按钮放在单元格的一侧，并添加了第一行。

Answer 2

原始答案

以下对我有用：

document.querySelectorAll('button').forEach(b => {
  b.addEventListener('click', () =>
  alert(b.parentNode.parentNode.firstChild.nextSibling.innerHTML));
});

请参阅https://jsfiddle.net/Luqy0u9m/了解即时演示。

请注意，我们必须接受第二个子节点，因为tr的第一个子节点是文本节点。如果第一个td直接来自tr。

，则可能需要调整此项

改进答案

原始答案很糟糕，因为它依赖于你知道<tr>和它的第一个<td>之间是否有空格。这不健全，因为如果您更改HTML，JavaScript就会中断。

相反，请查看<tr>的第一个子节点，而不是第一个<td>。执行此操作的最佳方法是使用HTMLTableRowElement对象的cells属性（您的<tr>）。 RobG已经给出了这个答案，所以我会提供一个替代方案（虽然速度较慢）：

document.querySelectorAll('button').forEach(b => {
  b.addEventListener('click', () =>
    alert(b.parentNode.parentNode.querySelector('td').innerHTML));
});

这是一个非常紧凑的解决方案，但它确实假设您的按钮直接位于一个td内，该td位于tr的第一个td中，其中包含您想要的值。它仍然比第一个答案更好。

选择“＆＃39; tr”中的兄弟元素。元件

2 个答案:

原始答案

改进答案