JSFiddle - React, Tailwind, and code Playground
HTML
<table class="datatable">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Is Graduate?</th>
</tr>
<tr class="row">
<td><input type="text" id="EID1" value="1"></td>
<td><input type="text" id="EName1" value="a"></td>
<td><select id="Gender1"><option>Male</option><option>Female</option></select></td>
<td><input type="checkbox" id="IsGraduate1"></td>
</tr>
<tr class="row">
<td><input type="text" id="EID2" value="2"></td>
<td><input type="text" id="EName2" value="b"></td>
<td><select id="Gender2"><option>Male</option><option>Female</option></select></td>
<td><input type="checkbox" id="IsGraduate2"></td>
</tr>
<tr class="row">
<td><input type="text" id="EID3" value="3"></td>
<td><input type="text" id="EName3" value="c"></td>
<td><select id="Gender3"><option>Male</option><option>Female</option></select></td>
<td><input type="checkbox" id="IsGraduate3"></td>
</tr>
<tr class="row">
<td><input type="text" id="EID4" value="4"></td>
<td><input type="text" id="EName4" value="d"></td>
<td><select id="Gender4"><option>Male</option><option>Female</option></select></td>
<td><input type="checkbox" id="IsGraduate4"></td>
</tr>
<tr class="row">
<td><input type="text" id="EID5" value="5"></td>
<td><input type="text" id="EName5" value="e"></td>
<td><select id="Gender5"><option>Male</option><option>Female</option></select></td>
<td><input type="checkbox" id="IsGraduate"></td>
</tr>
<tr class="row">
<td><input type="text" id="EID6" value="6"></td>
<td><input type="text" id="EName6" value="f"></td>
<td><select...
JavaScript
var items = [];
$(".row").each(function() {
var item = {};
item.ID = $.trim($(this).find("input[id*='ID']").val());
item.Name = $.trim($(this).find("input[id*='Name']").val());
item.Gender = $(this).find("select[id*='Gender']").val();
item.IsGraduate = $(this).find("input[id*='IsGraduate']").is(':checked');
items.push(item);
});
var DTO = JSON.stringify(items);
alert(DTO);