如何使用 Vanilla Javascript 检索 HTML 表 <td> 的值答案

【问题标题】：How to retrieve the value of the an HTML table <td> using Vanilla Javascript如何使用 Vanilla Javascript 检索 HTML 表 <td> 的值
【发布时间】：2021-02-10 07:16:17
【问题描述】：

如何使用 Vanilla Javascript 检索 HTML 表的值

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

当用户点击标签时，我想检索标签的值，以便知道使用JS点击了哪个标签

【问题讨论】：

如果我理解你的问题，你可以为每个 td 元素添加一个 eventListener 并使用元素的值做任何你想做的事情。作为线索，要监听的事件是click，并且可以通过 event.target.innerText 检索“值”
哦，顺便说一句，我们回答了您的问题..随时标记和/或支持我们：D

标签： javascript html

【解决方案1】：

为每个td添加一个事件监听器。

document.querySelectorAll('td').forEach((td) => {
  td.onclick = (e) => {
    console.log(e.target);  // Do something useful here...
  };
});

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

【讨论】：

最好将事件委托与表一起使用并在tbody 上设置单个侦听器（虽然您没有包含它，但它在呈现的页面中）。跨度>
@RandyCasburn 你的问题是他回答不是你想要的？ :l
不，这是一条评论。如果我不喜欢这个答案，我会说“你的答案很烂”——但我没有那样做。当事件系统的最基本功能之一旨在克服对它们的需求时，在 TD 上设置事件侦听器是一种严重的代码异味。我只是指出了一个替代方案。
@RandyCasburn 我明白你在说什么，在这种情况下它可能更有效。

【解决方案2】：

function handle_TD_click(ev){
  var selectedTD=ev.path[0]
  //you can do anything with this.. I'm just gonna console.log its innerText
  console.log(selectedTD.innerText)
}
[...document.all] //for all elements in a document
.forEach(a=>{
  if(a.tagName=="TD"){a.addEventListener('click',handle_TD_click)} //if the tagName(out of all document tags) is a td element, event listener is added
})

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

【讨论】：

您的代码抛出并且不起作用。而且启动起来非常低效。
@RandyCasburn 怎么会这样呢？它在我的电脑上完美运行
这是你对非标准path数组的使用。 Reference

【解决方案3】：

作为替代方案，使用事件委托将只允许使用一个事件处理程序。在这种情况下，click 事件被传递到表体上。

为了使其工作，此代码是必要的，以确保仅返回 TD 的内容。

if (e.target.nodeName !== 'TD') return;

要获取 TD 的值，请在事件目标 (e.target) 上使用 .textContent。

解决办法如下：

function logValue(e) {
  if (e.target.nodeName !== 'TD') return;
  console.log(e.target.textContent);
}

document.querySelector('tbody').addEventListener('click', logValue);

td {
  cursor: pointer;
}

<table style="width:100%">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </tbody>
</table>

【讨论】：