如何通过javascript / jquery获取单元格中的元素行?

时间:2012-03-18 11:17:19

标签: javascript jquery html dom

我有一个像这样的简单表

<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方法,就像你看到的那样。但有时候我不知道按钮放在row()中的深度有多深,所以我正在寻找一种通过元素的标记<tr>获得祖先的方法。

有人帮帮我,谢谢?

3 个答案:

答案 0 :(得分:11)

试试这个:

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任何元素的点击。

答案 1 :(得分:2)

jQuery方式是:

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

答案 2 :(得分:2)

如何使用最近的

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