Как получить содержимое выделенной ячейки в динамической таблице c, используя javascript - PullRequest
Новая
       38

Как получить содержимое выделенной ячейки в динамической таблице c, используя javascript

0 голосов
/ 15 апреля 2020

У меня есть таблицы. Теперь, если я нажму на любое из названий таблиц ниже, например, отзывы, как я могу получить значения для них. Стол динамический c. Ниже приведен код для отображения имен таблиц. 

<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 - это значение имени таблицы.

Здесь я хочу добавить 2 вещи:

  1. Прослушиватель щелчков
  2. Получите значения, щелкнув по таблицам, используя JavaScript

1 Ответ

1 голос
/ 15 апреля 2020

Чтобы щелкнуть элемент, вы можете прослушать события щелчка в таблице, а затем использовать свойство 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>
...