5

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>

10 Answers 10

14

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>

4
  • 1
    Felicitari for a nice answer. Just make sure that btnSearch will not be in the HTML if the asker already has it and forgot to mention in the question. Mar 14, 2017 at 12:43
  • Also, the suggestion in my answer will perform better than yours, since you are searching for items in the whole HTML with the :eq pseudo-selector instead of just the sub-tree necessary. Mar 14, 2017 at 12:45
  • Thanks @LajosArpad. The most efficient way is to use .children method. Btw, +1 for your answer. Mar 14, 2017 at 12:49
  • 1
    In this case the complexity will be same with your method. Mar 14, 2017 at 12:51
4

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;
});
4
$("#btnSearch").click(function () {
    $('#queryTable tbody tr').each(function() {
       alert($(this).find("td.FieldNameID").html() + " " + $(this).find("td.OperatorID").html());
    });
    return false;
}); 
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" />

3
  • Ohh that's great :)
    – Curiousdev
    Mar 14, 2017 at 12:44
  • @mohamedhafil nice answer, but it is worth to store $(this) and use it to avoid calling $() twice. Mar 14, 2017 at 12:46
  • 1
    @LajosArpad i'm completely agree wid u and i have learned something new dis tym thanks :)
    – Curiousdev
    Mar 14, 2017 at 12:51
1

Your first issue is that you're using an id selector yet the elements you're trying to find have classes.

Secondly you need to use DOM traversal to find the required cells within the current row using $(this).find().

Also note that it's much better to use console.log over alert() when debugging - especially when you have a large amount of data to display or are within a loop. Try this:

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

1

I can't see your btnSearch in html-code. Also you try to alert text by ID, but elements have only classes.

$("#btnSearch").click(function () {
    $("table > tbody > tr").each(function () {
        alert($(".FieldNameID").text() + " " + $(".OperatorID").text());
    });
    return false; });
1
  • Note that there are many items with those classes. Use the :eq pseudo-selector and you will have my upvote. Mar 14, 2017 at 12:42
1

This can give you the td values

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

1

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>

1

The only thing you need to change to make it work is the code inside the alert. You need to find the html contents of the class you'd like to display

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

I created Function for my project to get All Data IN Table With jquery(i used 3.6.0) add this in your code after load jquery :

String.prototype.esc_txt = function () {
    return this.replaceAll('\n', '').replaceAll('\t','');
}
jQuery.fn.extend({
    getDataTable: function (){
        let thisTable = $(this);
        let data = {}
        data['thead'] = [];
        thisTable.find("thead th").each ( function () {
            data['thead'].push($(this).text().esc_txt());
        });
        data['tbody'] = [];
        thisTable.find("tbody tr").each ( function () {
            let temp = {}
            $(this).find("td").each ( function (j) {
                temp[data['thead'][j]] = $(this).text().esc_txt();
            });
            data['tbody'].push(temp);
        });
        return data;
    },
    getTable: function () {
        return $(this).getDataTable()['tbody'];
    }
});

$("table").getDataTable(); return :

{

    "thead" : ["HeadText1","HeadText2","HeadText3",...],

    "tbody" : [
        {
            "HeadText1":"textInRow1", "HeadText2":"textInRow2", "HeadText3": "textInRow3", ...
        }
        ,...

    ]

}

$("table").getTable(); return tbody from top function :

 [
        {
            "HeadText1":"textInRow1", "HeadText2":"textInRow2", "HeadText3": "textInRow3", ...
        }
        ,...

]

;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.