Hello everyone, I am going to share the code sample for find selected table rows using jQuery. The detail about it as given below.
The
live demo link http://embed.plnkr.co/DCS0Mt/preview
The JQUERY/JavaScript code-sample
$(function () {
$('#userTable').on('click', 'tbody tr', function (event) {
});
$('#btnRowClick').click(function (e) {
var rows =
getHighlightRow();
if (rows != undefined)
{
alert(rows.attr('id'));
}
});
var getHighlightRow = function () {
return $('table > tbody
> tr.highlight');
}
});
The Live demo example(JavaScript +
HTML) code-sample
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function () {
$('#userTable').on('click', 'tbody tr', function (event) {
$(this).addClass('highlight').siblings().removeClass('highlight');
});
$('#btnRowClick').click(function (e) {
var rows =
getHighlightRow();
if (rows != undefined)
{
alert(rows.attr('id'));
}
});
var getHighlightRow = function () {
return $('table > tbody
> tr.highlight');
}
});
</script>
</head>
<body>
<div>
<h2>How to find selected
row using jQuery?</h2>
</div>
<button id="btnRowClick" class="button">Get Selected Row Ids</button><br />
<table id="userTable" class="row">
<tbody>
<tr style="background-color: #F0F8FF;">
<th><b>Id</b></th>
<th><b>Name</b></th>
<th><b>Age</b></th>
</tr>
<tr id="row1">
<td>1</td>
<td>Anil</td>
<td>30</td>
</tr>
<tr id="row2">
<td>2</td>
<td>Sunil</td>
<td>27</td>
</tr>
<tr id="row3">
<td>3</td>
<td>Sushil</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
The output link http://embed.plnkr.co/DCS0Mt/preview
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
