如何使用 Jquery 获取 Table 的所有行值？

Question

我想获取所有行的记录，即使它有 2 或 3 列。

我想从 tbody 获取所有值。

我试过这段代码。但它不起作用

这是代码

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

原文由 mohamed hafil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

FieldNameID 是 td DOM 元素的类，因此您必须将选择器更改为 $(".FieldNameID") 。

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

另一种解决方案是使用 .eq() 方法，将匹配元素的集合减少到指定索引处的元素。

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

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

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

原文由 Mihai Alexandru-Ionut 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Lajos Arpad 发布，翻译遵循 CC BY-SA 3.0 许可协议