JS: Как мне получить внутренний HTML элемента TD при щелчке по нему? - PullRequest
Новая
       23

JS: Как мне получить внутренний HTML элемента TD при щелчке по нему?

2 голосов
/ 12 июля 2020

Я начал изучать JavaScript not long a go.

У меня есть несколько элементов td в HTML, и когда я нажимаю на один из них, я хотел бы получить его внутренний HTML в JS. (Vanilla JS) 

<div class="calendarCont">
   <table>
      <tr>
         <td>Jan</td>
         <td>Feb</td>
         <td>Mar</td>
         <td>Apr</td>
      </tr>
      <tr>
         <td>May</td>
         <td>Jun</td>
         <td>Jul</td>
         <td>Aug</td>
      </tr>                                                                 
   </table>
</div>

Я уже знаю этот метод: 

<td onclick="clickedCell = this.innerHTML; console.log(clickedCell)>Jan</td>

Но я ищу функцию с addEventListener, если это возможно, но я Я открыт для любых предложений.

Спасибо.

Ответы [ 4 ]

3 голосов
/ 12 июля 2020

Я предлагаю вам избегать встроенного обработчика событий. Вы можете сначала настроить таргетинг на все tds, используя querySelectorAll(), затем l oop через них и прикрепить событие, используя addEventListener(): 

var tds = document.querySelectorAll('.calendarCont table tr td');
tds.forEach(function(td){
  td.addEventListener('click', handleTDClick);
});

function handleTDClick(){
  console.log(this.textContent);
}
<div class="calendarCont">
   <table>
      <tr>
         <td>Jan</td>
         <td>Feb</td>
         <td>Mar</td>
         <td>Apr</td>
      </tr>
      <tr>
         <td>May</td>
         <td>Jun</td>
         <td>Jul</td>
         <td>Aug</td>
      </tr>                                                                 
   </table>
</div>
2 голосов
/ 12 июля 2020

В JavaScript выберите элемент, охватывающий все элементы, которые вы хотите щелкнуть. Хорошим кандидатом для этого может быть элемент <table> или, может быть, элемент .calendarCont.

Причина выбора элемента-оболочки - для делегирования событий, что означает, что все события, которые запускаются внутри элемента-оболочки также будет срабатывать на самом элементе упаковки. Таким образом, вам нужно будет добавить только один прослушиватель событий для всех элементов. Хотя это потребует некоторой проверки, когда пользователь щелкает.

Добавьте прослушиватель событий с addEventListener к элементу таблицы и прослушивайте событие 'click'. Напишите функцию, которая будет обрабатывать щелчок, как у вас уже есть.

Поскольку теперь можно щелкнуть каждый элемент внутри элемента <table>, чтобы вызвать щелчок, вы захотите проверить, какой элемент был нажат. Каждое инициированное событие имеет объект Event с информацией о событии, которую можно прочитать из обработчика событий (функция обратного вызова).

Свойство event.target - это элемент, который вызвал событие щелчка. Оценивая, является ли цель тем элементом, который вы ищете, вы можете еще лучше контролировать свое событие. Например, в вашем случае показывать innerHTML только тогда, когда элементом является <td>. В противном случае ничего не делайте. 

const table = document.querySelector('table');

function onTableClick(event) {
  const isCell = event.target.tagName.toLowerCase() === 'td';
  if (isCell) {
    console.log(event.target.innerHTML);
  }
}

table.addEventListener('click', onTableClick);
<div class="calendarCont">
   <table>
      <tr>
         <td>Jan</td>
         <td>Feb</td>
         <td>Mar</td>
         <td>Apr</td>
      </tr>
      <tr>
         <td>May</td>
         <td>Jun</td>
         <td>Jul</td>
         <td>Aug</td>
      </tr>                                                                 
   </table>
</div>
0 голосов
/ 12 июля 2020

Итак, один метод, который хорошо работает: 

var selectedTableTD = document.querySelector('.calendarCont')
var tds = selectedTableTD.querySelectorAll('td');

tds.forEach(function(td){
  td.addEventListener('click', function(){
    console.log(this.textContent);
  });
});

Спасибо всем за вашу помощь.

0 голосов
/ 12 июля 2020

querySelectorAll и циклы станут вашими друзьями.

Нацелите каждый элемент и l oop через результат на addEventListener на каждый из td. 

function alertInnerHTML(){
  alert(this.innerHTML);
}

let tds = document.querySelectorAll("td");
tds.forEach(td => {
  td.addEventListener("click", alertInnerHTML)
});
<div class="calendarCont">
   <table>
      <tr>
         <td>Jan</td>
         <td>Feb</td>
         <td>Mar</td>
         <td>Apr</td>
      </tr>
      <tr>
         <td>May</td>
         <td>Jun</td>
         <td>Jul</td>
         <td>Aug</td>
      </tr>                                                                 
   </table>
</div>
...