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

Question

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>

Answer 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() );
});

alert($(this).find('.FieldNameID').text(), $(this).find('.OperatorID').text());

$("table > tbody > tr").each(function () {
    alert($(this).find('td').eq(0).text() + " " + $(this).find('td').eq(1).text() );
});

另一种方法是使用.children方法，它获取匹配元素集中每个元素的子元素，可选择由选择器过滤。

$("#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>

Answer 2

我在您的 HTML 中没有看到，但您尝试向其中btnSearch添加处理程序。click如果在向其添加处理程序时它不存在，那么即使稍后将其添加到 HTML，单击它也不会触发处理程序。

此外，当您迭代行时，您会将类与 id 混淆。你应该这样做：

$("#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;
});