jquery loop through table rows – jquery loop through table rows and columns

jquery loop through table rows – In depth jQuery each function usage i.e. jQuery for loop [5 ways] – You can iterate through the rows of an HTML table and retrieve the cell values using jQuery.

jquery loop through table rows

5 simple ways i use jQuery each() method. To iterate over an Array (Foreach loop), To iterate over Complex JSON Data, To iterate over Table Row (tr) and get TD value, To iterate over an Array of Object and To iterate over HTML element (LI tag).

Use jQuery each() function

Example
using this method to iterate over an Array.

 var myArray = ["apple", "mango", "orange", "grapes", "banana"];

 $.each(myArray, function (index, value) {
 console.log(index+' : '+value);
 });

#2 To iterate over an Array of Objects.

Example

var obj= [
          { memberFname: "Bhakti" , sirName:"Banugariya", Gender:"F"},
          { memberFname: "Krishna" , sirName:"Bhanderi", Gender:"M"},
          { memberFname: "Lalaji" , sirName:"Sagpariya", Gender:"F"},
          { memberFname: "Komalo" , sirName:"pipaliya", Gender:"M"},
          { memberFname: "Hardik" , sirName:"Chovatiya", Gender:"F"}
        ]

   $.each(obj, function (index, value) {
          var first_name=value.memberFname;
          var last_name=value.sirName;
          console.log(first_name+" "+last_name);
   });

#3 To iterate over a list element.

HTML code

Mayur
Ravi
Rekha
Darshti
Kishan
Sanjay
Sejal Ramani

jQuery Code

$("#all_things li").each(function(){
     var self=$(this);
     console.log(self.text());
});

$.each($("#all_things li"),function(){
     var self=$(this);
     console.log(self.text());
});

#4 To iterate over Table Row [ TR ].

HTML code

  
Sr no
Name
Gender
Location
  
 1
Mithun Ranpariya
 M 
 Junagdh 
  
 2 
Kishan Tala
 M 
 Kalavad 
  
 3 
Bhakti Banugariya
 F 
 Surat 
  
 4 
Lila Bhansaniya 
 F 
 Rajkot 
  
 5 
Priyanka Joshi
 F 
Ahemdabad

jQuery Code:

$(".button").on('click', function () {

                $("#memberInfo tr").each(function () {
                    var self = $(this);
                    var membner_1_value = self.find("td:eq(0)").text().trim();
                    var membner_2_value = self.find("td:eq(1)").text().trim();
                    var membner_3_value = self.find("td:eq(2)").text().trim();
                    var membner_4_value = self.find("td:eq(3)").text().trim();
                    var result = membner_1_value + " - " + membner_2_value + " - " + membner_3_value + " - " + membner_4_value;
                    console.log(result);
                });
            });

#5 To iterate over Complex JSON Data

JSON Data

  var json = [{"Member_ID":"101",
  "Member_Name":"Dhara",
  "Brands":[
    {"Brand_ID":"101-M1","Brand_Name":"Dhara SE"},
    {"Brand_ID":"101-M2","Brand_Name":"Dhara 11"},
    {"Brand_ID":"101-M3","Brand_Name":"Dhara X Pro"}]
 },
 {"Member_ID":"201",
  "Member_Name":"Vivo",
  "Brands":[
    {"Brand_ID":"201-M1","Brand_Name":"Vivo Z1X Pro"},
    {"Brand_ID":"201-M2","Brand_Name":"Vivo 17 Pro"},
    {"Brand_ID":"201-M3","Brand_Name":"Vivo UD"}]
 }];

HTML code

 

 
 
  
Member Name
 
  
Brands
 
 

jQuery Code: Use of nested .each() method

var fragment="";
 var BrandHTML="";
  $.each(json, function (index, value) {          
		 var Member_ID=value.Member_ID;
          var Member_ID=value.Member_Name;
		 
		  //now we do nested loop to get its Brands details.
         var objBrand=value.Brands;
		  
		  BrandHTML +="";
		  
		   $.each(objBrand, function (ind, val) {
		    var Brand_ID=val.Brand_ID;
              var Brand_Name=val.Brand_Name;			  
			   BrandHTML +="
"+Brand_Name+"
";
		   });
		   BrandHTML +="
";
		 
		 fragment +=""+Member_ID+" "+BrandHTML+" ";
   BrandHTML="";
   });
   
   $("#memberInfo").append(fragment);

Don’t Miss : How to get selected row value in html table using javascript?

How to iterate through a table rows and get the cell values using jQuery?

To iterate through a table’s rows and get the cell values using jQuery, you can use the each() method to loop through the rows, and then use the find() method to get the cell values. Here’s an example:

  

    

      
Column 1
      
Column 2
      
Column 3
    
  
  

    

      
Row 1 Cell 1
      
Row 1 Cell 2
      
Row 1 Cell 3
    
    

      
Row 2 Cell 1
      
Row 2 Cell 2
      
Row 2 Cell 3
    
    

      
Row 3 Cell 1
      
Row 3 Cell 2
      
Row 3 Cell 3
    
  

$(document).ready(function() {
  $('#myTable tbody tr').each(function() {
    var cell1 = $(this).find('td:eq(0)').text();
    var cell2 = $(this).find('td:eq(1)').text();
    var cell3 = $(this).find('td:eq(2)').text();
    console.log(cell1, cell2, cell3);
  });
});

In this example, we first select the table’s tbody element and loop through each of its tr elements using the each() method. Within the loop, we use the find() method to get the values of each cell by using its index with the :eq() selector. We then store the cell values in separate variables and display them in the console using the console.log() method.

I hope you get an idea about jquery loop through table rows.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.