Question

I have a simple table like this

<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);
}

I want to determine which row where the button clicked was placed. So I use some jquery method in btnclick() as you see abow. But sometime I don’t know how deep level the button was placed in row (), so Im looking for a way to get an ancestor by tag <tr> of a element.

Anybody help me, thanks?

Answer 1

Try this :

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

The closest() function will return the closest ancestor referenced by its selector. In this case the selector is simple a <tr> element.

Taken from the jQuery docs :

.closest( selector )

Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.

---

A better method could be used if you change your HTML a little bit. If you placed the same class on each of your buttons.
Eg :

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

Then your jQuery would look like this :

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

This function will capture a click on any element with the .myBtnClass class.