开发者问题收集

选择“tr”元素内的同级元素

2017-03-08
1348
javascript html dom

我有一张这样的表格： 

<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>

我想给按钮添加一个事件监听器，这样当我点击按钮时，它将获取相应的 id 值作为函数中的参数传递。如何在不使用 JQuery 的情况下完成此操作？

2个回答

要稳健地执行此操作，您首先需要从按钮向上移动到祖先 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 以将按钮放在单元格内，并添加了第一行。

RobG
2017-03-08

原始答案

以下对我有用： 

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 对象（您的 <tr> ）的 cells 属性。RobG 已经给出了这个答案，所以我将提供一个替代（虽然速度较慢）的解决方案： 

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

这是一个非常紧凑的解决方案，但它确实假设您的按钮直接位于 td 内，而 td 又位于 tr 内，tr 的第一个 td 保存您想要的值。但它比第一个答案好得多。

Ray Toal
2017-03-08