如何使用 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 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>