JS：当我点击一个 TD 元素时，如何获取它的 innerHTML？答案

【问题标题】：JS : How do I get the innerHTML of a TD element when I click on it?JS：当我点击一个 TD 元素时，如何获取它的 innerHTML？
【发布时间】：2020-11-01 17:22:36
【问题描述】：

不久前我开始学习 JavaScript。

我在 HTML 中有几个 td 元素，当我单击其中一个时，我想在 JS 中获得它的 innerHTML。（原版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 的函数，但我愿意接受任何建议。

谢谢。

【问题讨论】：

所有你需要的已经在你的问题中了。将其包装在一个函数中并将其用作.addEventListener() 的事件处理程序（这应该/可能从.addEventListener() 的文档中显而易见）

标签： javascript html html-table innerhtml

【解决方案1】：

我会建议你避免使用内联事件处理程序。您可以首先使用querySelectorAll() 定位所有 td，然后循环它们并使用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>

【讨论】：

“我建议你避免使用内联事件处理程序” - 很好，因为这就是问题的全部目的：“但我正在寻找的是带有 addEventListener 的函数"
只有一件事，当我使用这个时：``` var tds = document.querySelectorAll('.calendarCont table tr td'); ``` 它会选择我页面上的所有 td 元素，而不仅仅是 .calendarCont 中包含的元素所以只选择 .calendarCont 中的元素的方法是： ``` var selectedTableTD = document.querySelector('.conteneurTableauCalendrier') var tds = selectedTableTD.querySelectorAll('td'); ```谢谢你的帮助！
@Apollunar, 当我使用这个时：var tds = document.querySelectorAll('.calendarCont table tr td'); 它会选择我页面上的所有 td 元素，而不仅仅是 .calendarCont 中包含的元素 ,,,,,,, ，不对，它肯定只会从.calendarCont里面的表中选择tds :)

【解决方案2】：

在 JavaScript 中，选择一个包含您希望能够点击的所有元素的元素。 <table> 或 .calendarCont 元素可能是一个很好的候选对象。

选择包装元素的原因是为了事件委托，这意味着在包装元素内触发的所有事件也将在包装元素本身上触发。因此，您只需为所有元素添加一个事件侦听器。虽然这需要在用户点击时进行一些检查。

将带有addEventListener 的事件侦听器添加到表格元素并侦听'click' 事件。编写一个函数，就像你已经拥有的那样处理点击。

因为现在可以单击<table> 元素内的每个元素来触发单击，所以您需要检查哪个元素已被单击。每个触发的事件都有一个 Event 对象，其中包含有关事件的信息，可以从事件处理程序（回调函数）中读取。

event.target 属性是触发点击事件的元素。通过评估目标是否是您正在寻找的元素，您可以更好地控制您的事件。例如，在您的情况下，仅当元素为 <td> 时才显示 innerHTML。否则，什么也不做。

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>

【讨论】：

感谢您的详细解释，对您有很大帮助！

【解决方案3】：

querySelectorAll 和循环将成为你的朋友。

定位每个元素并将结果循环到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>

【讨论】：

【解决方案4】：

所以一种行之有效的方法是：

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

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

感谢大家的帮助。

【讨论】：