Получение внутренней строки во встроенных таблицах

Question

У меня есть таблица с вложенными таблицами. И проблема в том, что в прослушивании событий мыши я хотел бы получить самую глубокую строку. Я нашел this, что почти то, что я ищу, но я недостаточно опыт, чтобы использовать этот пример для решения моей проблемы. Ключ к успеху делает окно предупреждения, чтобы отобразить «2» вместо «1» в ниже приведены JSFIddle

<table> 
    <tbody> 
    <tr id='1'><td>A 
     <table> 
     <tbody> 
      <td><tr id='2'>B</tr></td> 
     </tbody> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 

ПРИМЕЧАНИЕ: Для простоты я представил два уровня, но хотел бы попросить вас рассмотреть общий случай когда любой уровень встроенных структур может быть возможен.

UPDATE: Смотрите updated JSFiddle исправленный для комментариев NewToJS в

Answer 1

• Использование 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>