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

时间：2017-03-14 12:34:02

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

我希望得到所有行的记录，即使它有2或3列。

我想从tbody获取所有值。

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

这是代码

＆＃13;
＆＃13; 
$("#btnSearch").click(function() {
  $("table > tbody > tr").each(function() {
    alert($("#FieldNameID").text() + " " + $("#OperatorID").text());
  });
  return false;
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

9 个答案:

答案 0 :(得分：4)

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

＆＃13;
＆＃13; 
$("#btnSearch").click(function () {
    $("table > tbody > tr").each(function () {
        alert($(this).find('td').eq(0).text() + " " + $(this).find('td').eq(1).text());
    });
    return false;
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
$("#btnSearch").click(function () {
    $("table > tbody > tr").each(function () {
        alert($(this).children('.FieldNameID').text() + " " + $(this).children('.OperatorID').text());
    });
    return false;
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

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

答案 2 :(得分：2)

您使用.代替#选择的课程以获取更多信息，请参阅以下代码段

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

答案 3 :(得分：1)

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

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

另请注意，在调试时使用console.log优于alert()会更好 - 特别是当您要显示大量数据或在循环内时。试试这个：

＆＃13;
＆＃13; 
$("#btnSearch").click(function() {
  $("table > tbody > tr").each(function() {
    console.log($(this).find('.FieldNameID').text(), $(this).find('.OperatorID').text());
  });
  return false;
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：1)

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

答案 5 :(得分：1)

我无法在html代码中看到你的btnSearch。您还尝试按ID提醒文本，但元素只有类。

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

答案 6 :(得分：1)

这可以为您提供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 :(得分：1)

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

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

答案 8 :(得分：0)

您需要更改才能使其正常工作的是警报内的代码。您需要找到您要显示的课程的html内容

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