Как получить строку элемента в ячейке по javascript / jquery?

Question

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

<table id="tempTable">
    <tbody>
        <tr id="row_01">
            <td>
                <button onclick="btnclick(this);" >Save Row</button>
            </td>
        </tr>
        <tr id="row_02">
            <td>
                <button onclick="btnclick(this);" >Save Row</button>
            </td>
        </tr>
    </tbody>
</table>

function btnclick(e) {
    var currentRow = $(e).parent().parent();
    alert(currentRow.id);
}

Я хочу определить, в какой строке была размещена кнопка. Поэтому я использую некоторый метод jquery в btnclick (), как вы видите выше. Но иногда я не знаю, насколько глубоко кнопка была помещена в row (), поэтому я ищу способ получить предка по тегу <tr> элемента.

Кто-нибудь поможет мне, спасибо?

Answer 1

Попробуйте это:

function btnclick(e) {
    var currentRow = $(e).closest('tr');
    alert(currentRow.id);
}

Функция closest() вернет ближайшего предка, на который ссылается его селектор.В этом случае селектор является простым <tr> элементом.

Взят из jQuery docs :

.closest (селектор)

Получить первый элемент, который соответствует селектору, начиная с текущего элемента и продвигаясь вверх по дереву DOM.

---

Лучший способ может быть использован , если вы изменитеВаш HTML немного.Если вы поместите один и тот же класс на каждую из ваших кнопок.
Например:

<td>
  <button class="myBtnClass" >Save Row</button>
</td>

Тогда ваш jQuery будет выглядеть так:

$(".myBtnClass").on('click',function(){
    var currentRow = $(this).closest('tr');
    alert(currentRow.attr('id'));
});

Эта функция будет захватывать нажатие на любой элемент с классом .myBtnClass.

Answer 2

как насчет использования ближайшего

function btnclick(e) {
    var currentRow = $(e).closest('tr');
    alert(currentRow.id);
}

Answer 3

Способ jQuery:

$('#tempTable').find('button').click(function() {
    var currentRow = $(this).closest('tr');
});