如何通過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);
}

我想確定單擊按鈕所在的行。 因此，如您所見，我在btnclick（）中使用了一些jquery方法。 但是有時我不知道按鈕在行（）中的放置深度，所以我正在尋找一種通過元素的標簽<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

jQuery的方式是：

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

Answer 3

如何使用最接近的

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