使用 javascript 或 dojo 或 jquery 获取调用 html 元素的句柄

Question

我有以下 table:

<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 只是为了提醒内部 HTML。然而，对我来说，我只是想要一种获得句柄的方法，这样我就可以在我的函数中做更多需要的处理。

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

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

使用 javascript 或 dojo 或 jquery 获取调用 html 元素的句柄

Getting handle on the calling html element using javascript or dojo or jquery

html

javascript

jquery

dojo