Get the Selected Row Value in an HTML Table with jQuery
Example 1: index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//Assign Click event to Button.
$("#btnGet").click(function () {
var message = "Id Name Country\n";
//Loop through all checked CheckBoxes in GridView.
$("#Table1 input[type=checkbox]:checked").each(function () {
var row = $(this).closest("tr")[0];
message += row.cells[1].innerHTML;
message += " " + row.cells[2].innerHTML;
message += " " + row.cells[3].innerHTML;
message += "\n";
});
//Display selected Row data in Alert Box.
alert(message);
return false;
});
});
</script>
</head>
<body>
<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
<tr>
<th> </th>
<th style="width:80px">Member Id</th>
<th style="width:120px">Name</th>
<th style="width:120px">City</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>Virat Kohali</td>
<td>Surat</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>Rohit Sharma</td>
<td>Bhavanagar</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>Krishna Dave</td>
<td>Gondal</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>4</td>
<td>Bhavu nevi</td>
<td>Rajkot</td>
</tr>
</table>
<br />
<input id = "btnGet" type="button" value="Get Selected" />
</body>
</html>I hope you get an idea about javascript to get table row values of selected checkboxes.
- This blog post was originally published at: https://www.pakainfo.com
1.00 GEEK