Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get all the rows values of Table using Jquery?

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>
like image 413
mohamed hafil Avatar asked Mar 14 '17 12:03

mohamed hafil


People also ask

How to get the value of table data in jQuery?

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).

How to get current row input value in jQuery?

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.


1 Answers

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>
like image 133
Mihai Alexandru-Ionut Avatar answered Sep 17 '22 00:09

Mihai Alexandru-Ionut