获取嵌入式表中最里面的行 [英] Getting the inner-most row in the embedded tables
问题描述
我有一个带有嵌套表的表,问题是在鼠标事件侦听器中,我想获取最深的行.我发现此这几乎是我想要的,但是我没有足够的经验来使用此示例来解决我的问题.成功的关键是在给定 JSFIddle 的情况下,在下面的警告框中显示"2"而不是"1".
I have a table with nested tables.And the problem is that in mouse event listener, I would like to grab the deepest row. I've found this which is almost what I am looking for, but I am not experienced enough to use this example to solve my issue. The key to success is making alert box to display "2" instead of "1" in the below given JSFIddle
<table>
<tbody>
<tr id='1'><td>A
<table>
<tbody>
<td><tr id='2'>B</tr></td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
注意:为简单起见,我介绍了两个级别,但是想问您考虑一下可能有任何级别的嵌入式结构的一般情况.
NOTE: For simplicity, I presented two levels, but would like to ask you consider the general case when any level of embedded structures might be possible.
更新:请参见已更新的JSFiddle 已针对NewToJS的评论进行了修正
UPDATE: See the updated JSFiddle corrected for NewToJS's comment
推荐答案
- 使用
event.stopPropagation()
- 还请注意,
td
是tr
的子级,反之亦然 - Use
event.stopPropagation()
- Also note that
td
is child oftr
, not vice versa
Event.stopPropagation()
在捕获和冒泡阶段阻止当前事件的进一步传播.
Event.stopPropagation()
Prevents further propagation of the current event in the capturing and bubbling phases.
$(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>
这篇关于获取嵌入式表中最里面的行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!