我有一个带有嵌套表的表。问题是在鼠标事件侦听器中,我想抓取最深的行。我发现了this https://stackoverflow.com/questions/18874829/how-do-i-highlight-only-the-innermost-table-row-of-a-nested-table这几乎是我正在寻找的,但我没有足够的经验来使用这个例子来解决我的问题。成功的关键是让警报框显示“2”而不是下面给出的“1”JSFIddle https://jsfiddle.net/7bxaraoe/
<table>
<tbody>
<tr id='1'><td>A
<table>
<tbody>
<td><tr id='2'>B</tr></td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
注意:为了简单起见,我提出了两个级别,但想请您考虑可能存在任何级别的嵌入式结构的一般情况。
更新:请参阅更新了 JSFiddle https://jsfiddle.net/9q7g3wxf/更正了 NewToJS 的评论
- Use event.stopPropagation() https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
- 另请注意
td
是的孩子tr
,反之则不然
Event.stopPropagation()
防止当前事件在捕获和冒泡阶段进一步传播。
$(function() {
$(document).on('mouseover', 'tr', function(e) {
e.stopPropagation();
console.log(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tbody>
<tr id='1'>
<td>A
<table>
<tbody>
<tr id='2'>
<td>B</td>
</tr>
<tr id='3'>
<td>C</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)