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

Question

我有桌子。现在，如果我单击下面的任何表名称，例如反馈，我如何获取它们的值。表是动态的。下面是显示表名的代码。

<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是表名的值。

在这里，我想添加两件事：

1. 点击监听器

2. 通过使用 JavaScript 单击表格来获取值

Answer 1

要让元素被点击，你可以监听表格上的点击事件，然后使用event.target属性来获取被点击的元素。// set up the 'click' event listenermyTable.addEventListener('click', event => {&nbsp; const clickedElement = event.target;&nbsp; // now that you have the clicked element, do what you want with it&nbsp; let stuffIWant = clickedElement.<some method or property of element>;});从问题中的示例来看，您似乎在寻找元素的内容<th>。如果是这种情况，您可以使用：stuffIWant = clickedElement.innerText;一个工作示例：// listen for all 'click' events within tableconst tbl = document.getElementById('tbl');tbl.addEventListener('click', event => {&nbsp; const el = event.target;&nbsp; alert(`you clicked "${el.innerText}"`);});#tbl {&nbsp; background-color: #aaa;&nbsp; margin: 12px;}th {&nbsp; padding: 0.5rem 2rem;&nbsp; border: 1px solid #999;}/* change cursor to hand on hover */th:hover {&nbsp; cursor: pointer;}<table id="tbl">&nbsp; <thead>&nbsp; &nbsp; <tr><th>Feedback</th></tr>&nbsp; &nbsp; <tr><th>Complaint</th></tr>&nbsp; &nbsp; <tr><th>Praise</th></tr>&nbsp; </thead></table>