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']"));
                })

这些代码行中，最后两行不起作用，它不是取给我一个结果，你能解释一下为什么吗？

-Thanks

Answer 1

使用：

$('#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')。

Answer 2

使用jQuery中的Click事件：

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

点击＆＃34; retailer_stock＆＃34;然后你可以从＆＃34; rid＆＃34;

中检索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

if(isset($_POST['btn_sub']))

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

4 个答案: