使用 javascript 或 dojo 或 jquery 处理调用的 html 元素答案

【问题标题】：Getting handle on the calling html element using javascript or dojo or jquery使用 javascript 或 dojo 或 jquery 处理调用的 html 元素
【发布时间】：2019-05-05 14:56:01
【问题描述】：

我有下表：

<table>
    <tr><td><span onClick='toggleFunction();'>ABC</span></td></tr>
    <tr><td><span onClick='toggleFunction();'>PQR</span></td></tr>
    <tr><td><span onClick='toggleFunction();'>XYZ</span></td></tr>
    <tr><td><span onClick='toggleFunction();'>LMN</span></td></tr>
</table>

HTML 是动态生成的。

function toggleFunction() {
  var innerHtml = //code to get inner html of calling element here
  console.log(innerHtml);
}

我想获取span 的内部html，从中通过onClick 调用toggleFunction()。

例如当点击在第 1 行时，ABC 应该会打印在控制台上。但是当点击在第 3 行时，XYZ 应该被打印出来。

这可以通过 Javascript 或 Dojo 实现吗？我不能使用 Jquery。但是，我想知道这是否可以使用 Jquery。

请注意span 元素没有任何ID。

这不是其他问题的重复：

1) 公认的解决方案使用内联 javascript 来提醒 innerHTML。然而，对我来说，我只是想要一种方法来获得一个句柄，这样我就可以在我的函数中进行更多需要的处理。

2）关于这个问题的其他答案是使用元素 id，这不是我的情况。

【问题讨论】：

How to get innerHTML of this element in javascript? 和 Javascript: How to get innerHTML of clicked button 的可能重复
@adiga 这不是一个重复的问题。最好先阅读问题。不要过度监控和阻止问题。
使用toggleFunction 而不是alert。我找到了至少 10 个重复项。
答案很简单var innerHtml = event.target.innerHTML;
@adiga：真的吗？回答我的问题的问题在哪里。如果toggleFunction 在单独的文件中，则toggleFunction 中的console.log(this.innerHTML) 不起作用。如果是这样，如果您觉得自己知道答案，为什么不提供相同的 JSFiddle。

标签： javascript jquery html dojo

【解决方案1】：

您可以使用event.target 定位点击的元素，然后使用textContent 获取内容，例如：

var innerHtml = event.target.textContent;

注意 1：td 应在 tr 之前关闭，因此在末尾使用 </td></tr> 而不是 </tr></td>。

注意 2：您在传递给console.log() 的变量中有错字，它应该是innerHtml 而不是innnerHtml。

注意 3：由于列中没有 HTML，最好使用 textContent 而不是 innerHTML。

function toggleFunction() {
  var innerHtml = event.target.textContent;
  console.log(innerHtml);
}

<table>
  <tr>
    <td><span onClick='toggleFunction();'>ABC</span></td>
  </tr>
  <tr>
    <td><span onClick='toggleFunction();'>PQR</span></td>
  </tr>
  <tr>
    <td><span onClick='toggleFunction();'>XYZ</span></td>
  </tr>
  <tr>
    <td><span onClick='toggleFunction();'>LMN</span></td>
  </tr>
</table>

【讨论】：