Find a element with particular name attribute or id in HTML with JQuery
Question
I have a table with couple of columns, one of which is a link, on clicking it, I am calling JQuery click event. On click I want to get the value of a another column, which is a sibling of this column(td). how can i get it.
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>
on clicking the id=retailer_stock, a modal pops up and should have the value of data-name='rid'. How should i do it.
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']"));
})
of these code lines, last two is not working, its not fetching me a result, can any of you explain why?
-thanks
4 answers
solution1
2 ACCPTED 2016-01-23 06:45:26
Use:
$('#retailer_stock').click( function(e){
alert( $(this).closest('tr').children().eq(0).text() )
})
Check demo: fiddle
If you want to access that cell through data-name attribute use:
$('#retailer_stock').click( function(e){
alert( $(this).closest('tr').find('[data-name="rid"]').text() )
})
However if you plan to have many rows in the table, you will end up with many elements with same retailer_stock id. To avoid this you may decide to change id="retailer_stock" to class="retailer_stock" and then change selector to $('.retailer_stock') .
solution2
0 2016-01-23 06:43:32
Using the Click event from jQuery:
Capture the click on "retailer_stock" then you can retrieve the HTML from "rid"
solution3
0 2016-01-23 06:48:53
<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>
solution4
0 2016-01-23 06:50:39
$('#retailer_stock').click(function(e){ $(this).parent().find('[data-name="rid"]').text() });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.