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

Question

不久前我开始学习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 的 function，但我愿意接受任何建议。

谢谢你。

Answer 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>

Answer 2

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

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

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

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

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>

Answer 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>

Answer 4

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

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

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

感谢大家的帮助。