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
