Search code examples
javascriptjqueryhtmlasp.nethtml-table

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>


Solution

  • 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>