I wants to get all the row's records, even it has 2 or 3 columns.
I want to get all the values from tbody
.
I tried this code. But it doesn't work
Here is code
$("#btnSearch").click(function() {
$("table > tbody > tr").each(function() {
alert($("#FieldNameID").text() + " " + $("#OperatorID").text());
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSearch">Search</button>
<table class="table table-hover " id="queryTable">
<thead>
<tr>
<th>Field Name</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td class="FieldNameID">tq.StoreID</td>
<td class="OperatorID"> IN('1001')</td>
</tr>
<tr>
<td class="FieldNameID">AND item.SubDescription1</td>
<td class="OperatorID"> IN('215')</td>
</tr>
<tr>
<td class="FieldNameID">AND dept.Name</td>
<td class="OperatorID"> IN('Rent Department')</td>
</tr>
<tr>
<td class="FieldNameID">AND sup.SupplierName</td>
<td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>
</tr>
<tr>
<td class="FieldNameID">AND sup.SupplierName</td>
<td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
</tr>
</tbody>
</table>
FieldNameID
is a class for td
DOM elements so you have to change your selector to $(".FieldNameID")
.
alert($(this).find('.FieldNameID').text(), $(this).find('.OperatorID').text());
Another solution is to use .eq()
method, which reduce the set of matched elements to the one at the specified index.
$("table > tbody > tr").each(function () {
alert($(this).find('td').eq(0).text() + " " + $(this).find('td').eq(1).text() );
});
$("#btnSearch").click(function () {
$("table > tbody > tr").each(function () {
alert($(this).find('td').eq(0).text() + " " + $(this).find('td').eq(1).text());
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover " id="queryTable">
<thead>
<tr>
<th>Field Name</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td class="FieldNameID">tq.StoreID</td>
<td class="OperatorID"> IN('1001')</td>
</tr>
<tr>
<td class="FieldNameID">AND item.SubDescription1</td>
<td class="OperatorID"> IN('215')</td>
</tr>
<tr>
<td class="FieldNameID">AND dept.Name</td>
<td class="OperatorID"> IN('Rent Department')</td>
</tr>
<tr>
<td class="FieldNameID">AND sup.SupplierName</td>
<td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>
</tr>
<tr>
<td class="FieldNameID">AND sup.SupplierName</td>
<td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
</tr>
</tbody>
</table>
<button id="btnSearch">Click</button>
Another method is to use .children
method, which get the children of each element in the set of matched elements, optionally filtered by a selector.
$("#btnSearch").click(function () {
$("table > tbody > tr").each(function () {
alert($(this).children('.FieldNameID').text() + " " + $(this).children('.OperatorID').text());
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover " id="queryTable">
<thead>
<tr>
<th>Field Name</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td class="FieldNameID">tq.StoreID</td>
<td class="OperatorID"> IN('1001')</td>
</tr>
<tr>
<td class="FieldNameID">AND item.SubDescription1</td>
<td class="OperatorID"> IN('215')</td>
</tr>
<tr>
<td class="FieldNameID">AND dept.Name</td>
<td class="OperatorID"> IN('Rent Department')</td>
</tr>
<tr>
<td class="FieldNameID">AND sup.SupplierName</td>
<td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>
</tr>
<tr>
<td class="FieldNameID">AND sup.SupplierName</td>
<td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
</tr>
</tbody>
</table>
<button id="btnSearch">Click</button>