javascript - 使用JQuery在HTML中查找具有特定名称属性或ID的元素

我有一个包含两列的表，其中一列是链接，单击它时，我正在调用JQuery click事件。单击时，我想获取另一列的值，该值是该列的同级（td）。我怎么才能得到它。

HTML
<table class="table table-bordered table-hover">
                                        <thead>
                                            <th>RID</th>
                                            <th>Mobile Number</th>
                                            <th>Outlet Name</th>
                                            <th>Place</th>
                                            <th>Email</th>
                                            <th>Balance</th>
                                            <th>Stock</th>
                                            <th>Password</th>
                                        </thead>
                                        <tr>
                                            <td data-name="rid">5111879</td>
                                            <td data-name="mobile">9066587654</td>
                                            <td data-name="outlet">Rachels</td>
                                            <td>Indhiranagar, BL</td>
                                            <td>[email protected]</td>
                                            <td><i class="fa fa-inr"></i>378665</td>
                                            <td><a href="#" id="retailer_stock">TRANSFER</a></td>
                                            <td><a href="#" id="retailer_reset">RESET</a></td>
                                        </tr>
                                    </table>

单击id = retailer_stock后，将弹出一个模式，其值应为data-name ='rid'。我应该怎么做。

Javascript
 $('#retailer_stock').click( function(event){
                    console.log($(this));
                    console.log($(event.target).closest('tr').children("[id = 'rid']"));
                    console.log($(this).closest('tr').children("[id = 'rid']"));
                    console.log($(event.target).closest('tr').find("[id = 'rid']"));
                    console.log($(event.target).siblings("[id = 'rid']"));
                    console.log($(this).closest("[id = 'rid']"));
                })

这些代码行中的最后两个不起作用，它没有给我带来结果，你们谁能解释为什么？

-谢谢

最佳答案

采用：

$('#retailer_stock').click( function(e){
    alert( $(this).closest('tr').children().eq(0).text() )
})

查看演示：fiddle

如果要通过data-name属性访问该单元格，请使用：

$('#retailer_stock').click( function(e){
    alert( $(this).closest('tr').find('[data-name="rid"]').text() )
})

但是，如果计划在表中包含许多行，则最终将得到许多具有相同retailer_stock id的元素。为避免这种情况，您可以决定将id="retailer_stock"更改为class="retailer_stock"，然后将选择器更改为$('.retailer_stock')。