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

【问题标题】：How to get all the rows values of Table using Jquery?如何使用 Jquery 获取 Table 的所有行值？
【发布时间】：2017-08-04 19:10:29
【问题描述】：

我想获取所有行的记录，即使它有 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>

【问题讨论】：

标签： javascript jquery html asp.net html-table

【解决方案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>

【讨论】：

Felicitari 以获得一个很好的答案。如果提问者已经拥有它并且忘记在问题中提及，请确保 btnSearch 不会出现在 HTML 中。
另外，我的回答中的建议会比您的建议执行得更好，因为您正在使用 :eq 伪选择器搜索整个 HTML 中的项目，而不仅仅是必要的子树。
感谢@LajosArpad。最有效的方法是使用.children 方法。顺便说一句，为您的回答 +1。
在这种情况下，复杂性将与您的方法相同。

【解决方案2】：

您的第一个问题是您正在使用 id 选择器，但您尝试查找的元素具有类。

其次，您需要使用 DOM 遍历使用$(this).find() 在当前行中找到所需的单元格。

还要注意，在调试时使用console.log 比使用alert() 好得多——尤其是当您有大量数据要显示或处于循环中时。试试这个：

$("#btnSearch").click(function() {
  $("table > tbody > tr").each(function() {
    console.log($(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>
    <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">Search</button>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

对于您使用. 而不是# 选择的课程，请在下面找到sn-p

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

【讨论】：

哦，太好了:)
@mohamedhafil 不错的答案，但值得存储 $(this) 并使用它来避免两次调用 $()。
@LajosArpad 我完全同意你，我学到了一些新的东西谢谢:)

【解决方案5】：

我在 html 代码中看不到您的 btnSearch。您还尝试通过 ID 来提醒文本，但元素只有类。

$("#btnSearch").click(function () {
    $("table > tbody > tr").each(function () {
        alert($(".FieldNameID").text() + " " + $(".OperatorID").text());
    });
    return false; });

【讨论】：

请注意，这些类有很多项目。使用 :eq 伪选择器，您将获得我的支持。

【解决方案6】：

这可以给你 td 值

$("#btnSearch").click(function () {
    $("table > tbody > tr").each(function (index,element) {
       
        alert($(element).find(".FieldNameID").text() + " " + $(element).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>
       <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">Search</button>

【讨论】：

【解决方案7】：

我在您的 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;
});

【讨论】：

【解决方案8】：

如果我理解正确，这可能会解决您的问题。

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

【讨论】：

【解决方案9】：

您唯一需要更改以使其工作的是警报中的代码。您需要找到要显示的类的 html 内容

$("#btnSearch").click(function () {
    $("table > tbody > tr").each(function (index, value) {
        alert(
           $(value).find(".FieldNameID").html() + " " + $(value).find(".OperatorID").html()
        );
    });
    return false;
});

【讨论】：