代码之家 › 专栏 › 技术社区 › Vicky

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

dojo html jquery javascript

-2

Vicky · 技术社区 · 6 年前

我有下表:

<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);
}

我想得到的内部HTML span 从中 toggleFunction() 通过调用 onClick .

例如,当单击第1行时, ABC 应该在控制台上打印。但当点击第3行时, XYZ 应该打印。

这可以通过JavaScript或Dojo实现吗?我不能使用jquery。但是,我想知道是否可以使用jquery。

请注意 跨度 元素没有任何ID。

这不是其他问题的副本,因为:

1)接受的解决方案使用内联javascript来警告innerhtml。但是,对于我来说,我只想找到一种方法来获得一个句柄,这样我就可以在函数内部进行更多需要的处理。

2)问题的其他答案是使用元素ID,这不是我的情况。

1 回复 | 直到 6 年前

Zakaria Acharki 6 年前

你可以使用 event.target 若要以单击的元素为目标,请使用 textContent 像:

var innerHtml = event.target.textContent;

注1: 这个 td 应该在之前关闭 tr 所以用 </td></tr> 在最后而不是 </tr></td> .

注2: 传递给的变量中有一个拼写错误 console.log() ,应该是 innerHtml 而不是 innnerHtml .

注3: 因为列中没有HTML,所以最好使用 文本内容 而不是 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前