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

Question

我有一个包含两列的表，其中一列是链接，单击它时，我正在调用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>rach@yahoo.com</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']"));
                })

这些代码行中的最后两个不起作用，它没有给我带来结果，你们任何人都可以解释为什么吗？

-谢谢

Answer 1

采用：

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

检查演示：提琴

如果要通过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') 。

Answer 2

使用jQuery中的Click事件：

https://api.jquery.com/click/

捕获“ retailer_stock”上的点击，然后您可以从“ rid”中检索HTML

http://api.jquery.com/html/

Answer 3

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function () {

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

    });
</script>
</head>
<body>
<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>rach@yahoo.com</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>
</body>
</html>

Answer 4

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

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

问题描述

4 个解决方案

解决方案1
2 已采纳 2016-01-23 06:45:26

解决方案2
0 2016-01-23 06:43:32

解决方案3
0 2016-01-23 06:48:53

解决方案4
0 2016-01-23 06:50:39

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2016-01-23 06:45:26

解决方案2 0 2016-01-23 06:43:32

解决方案3 0 2016-01-23 06:48:53

解决方案4 0 2016-01-23 06:50:39

解决方案1
2 已采纳 2016-01-23 06:45:26

解决方案2
0 2016-01-23 06:43:32

解决方案3
0 2016-01-23 06:48:53

解决方案4
0 2016-01-23 06:50:39