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]

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

<ul id="all_things">
<li class='members' >Mayur</li>
<li class='members' >Ravi</li>
<li class='automobile' >Rekha</li>
<li class='automobile' >Darshti</li>
<li class='members' >Kishan</li>
<li class='members' >Sanjay</li>
<li class='automobile' >Sejal Ramani</li>
</ul>

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

<table id="memberInfo" style="margin-left:50px;">
  <tr><th>Sr no</th><th>Name</th><th>Gender</th><th>Location</th></tr>
  <tr><td> 1</td><td>Mithun Ranpariya</td><td> M </td><td> Junagdh </td></tr>
  <tr><td> 2 </td><td>Kishan Tala</td><td> M </td><td> Kalavad </td></tr>
  <tr><td> 3 </td><td>Bhakti Banugariya</td><td> F </td><td> Surat </td></tr>
  <tr><td> 4 </td><td>Lila Bhansaniya </td><td> F </td><td> Rajkot </td></tr>
  <tr><td> 5 </td><td>Priyanka Joshi</td><td> F </td><td>Ahemdabad</td></tr>
</table>

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

 <table id="memberInfo" class="table">
 <tr> 
  <th>Member Name</th> 
  <th>Brands</th>
 </tr>
</table> 

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 +="<li>"+Brand_Name+"</li>";
		   });
		   BrandHTML +="<ul>";
		 
		 fragment +="<tr><td>"+Member_ID+"</td> <td>"+BrandHTML+" </td></tr>";
   BrandHTML="";
   });
   
   $("#memberInfo").append(fragment);

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

Also Read This ๐Ÿ‘‰   Server side Laravel DataTables example

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.