无法获取 Html Table 中的上一行属性

Question

我一直在研究这个 Html Table 结构 :

<table>
    <tr id='1' pid='p3'><td><button id='1' onClick="get(this,'p3')">1</button></td></tr>
    <tr id='2' pid='p3'><td><button id='2' onClick="get(this,'p3')">2</button></td></tr>
    <tr id='3' pid='p2'><td><button id='3' onClick="get(this,'p2')">3</button></td></tr>
    <tr id='4' pid='p1'><td><button id='4' onClick="get(this,'p1')">4</button></td></tr>
    <tr id='5' pid='p2'><td><button id='5' onClick="get(this,'p2')">5</button></td></tr>
    <tr id='6' pid='p2'><td><button id='6' onClick="get(this,'p2')">6</button></td></tr>
</table>

我的目标是在单击当前 table 行内的按钮时获取 ('closest , above') table 行按钮的 ID（抱歉，这有点混乱）

我这样使用 jQuery :

function get(elm,pid){
    alert($.nid=$(elm).closest('tr').prev("tr[pid='"+pid+"']").find('button').attr('id'));
}

我发现如果行位于另一行之上，则可以毫无问题地获取前一行中的按钮 ID。

但是如果该行在更上方，则无法获取值；逻辑上有什么问题？我哪里错了？

请在此处找到我的解释 fiddle：

http://jsfiddle.net/jtYDP/386/

Answer 1

.prev() 方法 select 是 第一个 前一个兄弟元素。如果您传递 selector 它 select 仅当它与指定的 selector.

匹配时才是前一个兄弟

假设您点击了第四个按钮。 get 函数的第二个参数是 p1，因为 tr 不匹配指定的 select 或 jQuery returns 一个空集合因此 attr returns undefined.

如果我没有正确理解问题，您想要 select 具有相同 pid 的前一个 tr。您可以使用 .prevAll() 和 .first() 方法。

$('tr button').on('click', function() {
    var $row = $(this).closest('tr'),
        pid = $row.attr('pid');

    var id = $row.prevAll("tr[pid='"+pid+"']")
                 .first() 
                 .find('button')
                 .attr('id');
});

注意 ID 必须唯一。 pid 不是有效属性。您可以改用 data-* 属性。

无法获取 Html Table 中的上一行属性

Not able to get Previous row attributes in Html Table

jquery

html-table