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

javascript jquery html asp.net html-table

19,862

Solution 1

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>

Solution 2

I do not see btnSearch in your HTML, yet you try to add a click handler to it. If it does not exist at the time when you add the handler to it, then even if it is added later to the HTML, clicking on it will not fire the handler.

Also, when you iterate the rows, you confuse classes with ids. This is how you should do it:

$("#btnSearch").click(function () {
    $("table > tbody > tr").each(function () {
        var currentRow = $(this); //Do not search the whole HTML tree twice, use a subtree instead
        alert(currentRow.find(".FieldNameID").text() + " " + currentRow.fint("#OperatorID").text());
    });
    return false;
});

Solution 3

for classes you have select using . instead of # for more info please find below snippet

$("#btnSearch").click(function () {
    $("table > tbody > tr").each(function () {
    var this = $(this);
        alert(this.find(".FieldNameID").text() + "  " + this.find(".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 class="tbodyy">
       <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>

<input type="button" id="btnSearch" value="Search" />

Solution 4

$("#btnSearch").click(function () {
    $('#queryTable tbody tr').each(function() {
       alert($(this).find("td.FieldNameID").html() + " " + $(this).find("td.OperatorID").html());
    });
    return false;
});

Solution 5

If i understand you correctly this may solve your problem.

$("#btnSearch").click(function() {
  $("table > tbody > tr").each(function() {
    var rowText=""
    $(this).find('td').each(function(){
     rowText= rowText +$(this).text() + " ";
    });
    alert(rowText);
  });
  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>

View more solutions

19,862

Author by

mohamed hafil

Updated on June 09, 2022

Comments

mohamed hafil almost 2 years

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>