<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
var trid = $(this).closest('tr').attr('id'); // table row ID
$("#message").text("Closest tr id is: " +trid);
});
});
</script>
</head>
<body>
<h3>Get closest tr class in jQuery</h3>
<p>Click on the show class to get the result.</p>
<table style="width:100%" id="myTable">
<tr>
<th>Sl No</th>
<th>Stock</th>
<th>Quantity</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr id="1" class="1">
<td>1</td>
<td><input type="text" class="stock" ></td>
<td><input type="text" class="quantity"></td>
<td><input type="text" class="price"></td>
<td><button type="button">Show Class</button></td>
</tr>
<tr id="2" class="2">
<td>2</td>
<td><input type="text" class="stock"></td>
<td><input type="text" class="quantity"></td>
<td><input type="text" class="price"></td>
<td><button type="button">Show Class</button></td>
</tr>
<tr id="3" class="3">
<td>3</td>
<td><input type="text" class="stock"></td>
<td><input type="text" class="quantity"></td>
<td><input type="text" class="price"></td>
<td><button type="button">Show Class</button></td>
</tr>
</table>
<h3 id="message"></h3>
</body>
</html>