I am trying to use jquery each function on a table to get data from an html table which is inside a div with it’s own id on another button click and match the id with an input value. For example from my structure below, the div with id 329 has it own table and it’s matches the input value of 329. Since it matches the input value, I want to loop through that specific table and get the td values inside that particular div.
My parent div with the tables looks like this.
$("#btn").click(function() {
$(".parentDIV").each(function(i, el2) {
var sechID = el2.id;
var tables = el2.innerHTML // -- -- > I can see each table with the div id here.
('.table tbody tr').each(function() {
var numbers = $(this).find('td').eq(0);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="fname" name="fname" value="329"><br><br>
<div class="parentDIV">
<div class="container" id="378">
<h2 class="myclass Pointer" id="329">
<span class="glyphicon glyphicon-plus"></span>
<span>Employee Email</span>
</h2>
<div class="container" id="329" style="display: none;">
<table class="table table-striped">
<thead>...
</thead>
<tbody>..... </tbody>
</table>
</div>
<div class="container" id="9378">
<h2 class="myclass Pointer" id="1329">
<span class="glyphicon glyphicon-plus"></span>
<span>Employee</span>
</h2>
<div class="container" id="1329" style="display: none;">
<table class="table table-striped">
<thead>...
</thead>
<tbody>..... </tbody>
</table>
</div>
<div class="container" id="878">
<h2 class="myclass Pointer" id="2329">
<span class="glyphicon glyphicon-plus"></span>
<span>Employee</span>
</h2>
<div class="container" id="2329" style="display: none;">
<table class="table table-striped">
<thead>...
</thead>
<tbody>..... </tbody>
</table>
</div>
</div>