Как выбрать идентификатор строки таблицы?

Question

У меня есть простая таблица вида:

<table> 
: 
<tr class="main" id="row1"><td><a href="#" class="showstuff">Assignment 1</a></td></tr> 
<tr class="detail hide"><td>... detail about Assignment 1...</td></tr> 
<tr class="main" id="row2"><td><a href="#" class="showstuff">Assignment 2</a></td></tr> 
<tr class="detail hide"><td>... detail about Assignment 2...</td></tr> 
: 
</table> 

Я хочу, чтобы показать детали, связанные с назначением щелкнули, как я понимаю, требует чего-то вида $ (это) .parent() .next(), чтобы выбрать следующую строку. Однако я не могу выбрать текущую строку. При попытке отладки проблемы я попытался получить идентификатор текущей строки, но просто получим «undefined». Мой код:

$(document).ready(function(){ 
    $(document).on("click",'a.showstuff',function(){toggleDetail();return false;}); 
}); 
function toggleDetail(){ 
var abc = $(this).parent().attr('id'); 
console.log(abc) 
}; 

Где дыра в моем подходе?

Благодаря/B

Answer 1

.parent() будет соответствовать только прямые элементы родительских (т.е. на один уровень выше). Так как вы являются обязательными для обработчика к a элементов (которые вложены далее вниз в td), вам нужно, чтобы использовать .closest() (который «пузыриться» весь DOM дерева до своего первого матча) вместо как:

$(this).closest('tr').attr('id'); 

Прочитайте документацию на .closest(), .parent() и тоже проверить .parents()

EDIT:

Вторая проблема с вашим кодом, что вы потеряете кон обработчик событий в текст при вызове метода toggleDetail() изнутри обработчика. Либо переместить содержимое вашего метода внутри обработчика:

$(document).on('click', 'a.showstuff', function(){ 
    console.log($(this).closest('tr').attr('id')); 
    return false; 
}); 

или передать элемент:

$(document).on('click', 'a.showstuff', function(){ 
    toggleDetail(this); 
    return false; 
}); 

function toggleDetail(el){ 
    console.log($(el).closest('tr').attr('id')); 
} 

Answer 2

Родительский элемент a тега td, к которому вы не дали каких-либо id атрибут. Итак, результат undefined. Вы фактически дали id до tr элемент, который находится на два уровня вверх. вы должны на самом деле сделать следующее:

$(this).parent().parent().attr('id');