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>
jQuery: code to get TD text value on button click. text() method we get the TD value (table cell value). So our code to get table td text value looks like as written below. $(document). ready(function(){ // code to read selected table row cell data (values).
jQuery val() method is used to get the value of an element. This function is used to set or return the value. Return value gives the value attribute of the first element.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With