如何使用 javascript 在动态 table 中获取单击单元格的内容

Question

我有table存在。现在，如果我单击以下 table 名称中的任何一个，例如反馈，我如何才能获得它们的值。 table 是动态的。下面是显示 table 个名字的代码。

<table class="table  table-hover" style="margin-top: 25px;width:300px;">
  <thead>
    {% for i in tables %}
    <tr>
      <th > {{ i }} </th>
    </tr>
      {% endfor %}
  </thead>
</table>

注意，i 是 table 名称的值。

这里我想补充两点：

点击监听器
使用 JavaScript

Answer 1

要点击元素，您可以在 table 上监听点击事件，然后使用 event.target 属性获取被点击的元素。

// set up the 'click' event listener
myTable.addEventListener('click', event => {
  const clickedElement = event.target;

  // now that you have the clicked element, do what you want with it
  let stuffIWant = clickedElement.<some method or property of element>;
});

从问题中的示例来看，您似乎在寻找 <th> 元素的内容。如果是这样，您可以使用：

stuffIWant = clickedElement.innerText;

一个工作示例：

// listen for all 'click' events within table
const tbl = document.getElementById('tbl');
tbl.addEventListener('click', event => {
  const el = event.target;
  alert(`you clicked "${el.innerText}"`);
});

#tbl {
  background-color: #aaa;
  margin: 12px;
}
th {
  padding: 0.5rem 2rem;
  border: 1px solid #999;
}
/* change cursor to hand on hover */
th:hover {
  cursor: pointer;
}

<table id="tbl">
  <thead>
    <tr><th>Feedback</th></tr>
    <tr><th>Complaint</th></tr>
    <tr><th>Praise</th></tr>
  </thead>
</table>

如何使用 javascript 在动态 table 中获取单击单元格的内容

How to fetch contents of clicked cell in a dynamic table using javascript

html

javascript

dynamic-tables

flask

onclicklistener