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

Posted 2023-05-07

【中文标题】JS：当我点击一个 TD 元素时，如何获取它的 innerHTML？

【英文标题】：JS : How do I get the innerHTML of a TD element when I click on it?

【发布时间】：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() 的文档中显而易见）

【参考方案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);
  );
);

感谢大家的帮助。