Step1:
Welcome to designers dairy blog,We are going to discuss about how to repeat the table using the jquery

Step2:
We have to assign the portion of html-markup which is going to add the data in the tbody.
 
 1.Create a Variable called  - html and attached the markup to it.
 2.Mark-up can be lined up by the  (single -quotes and plus symbols)
 Ex:
 '<tr class="adding-row"><td class="sn">' +  (i +1) + '</td> <td> Lulea </td> <td> Female  </td><td class="addrow">' +  

depend upon, how the table is  structured inside whether Single or Double quotes

2.  To Display the Serial  Numbers from order. We can make use from variable values which assigned in the for loop... (i +1)

  Example1:
<td class="sn">' +  json[i].SNo + '</td>

  Example2:

Assigning the variable for id Values 

   '<a class="btn btn-circle btn-icon-only btn-default green add-row" data-row="row'+ i +'" href="javascript:;">' +

  '<i class="fa fa-plus " aria-hidden="true"></i> </a><a class="btn btn-circle btn-icon-only btn-default red  delete-row" '+ 'data-row="row'+ i +'" href="javascript:;"><i class="fa fa-trash " aria-hidden="true" title="delete"></i> </a>'+


3. Step3:

Jquery script goes here..

Using For-loop :

 <script>
$(document).ready(function(e) {
var json =
[
 { "SNo" : 1, "Name" : "Lulea", "Gender" : "Female" },
 { "SNo" : 2, "Name" : "John",   "Gender" : "Male" },
 { "SNo" : 3, "Name" : "Micheal", "Gender" : "Male" }
]
     for(var i=0; i<json.length; i++)
{

 var html = '<tr class="adding-row"><td class="sn">' +  json[i].SNo + '</td><td>' + json[i].Name + '</td><td>' + json[i].Gender + '</td><td class="addrow">' +             '<a class="btn btn-circle btn-icon-only btn-default green add-row" data-row="row'+ i +'" href="javascript:;">' +
            '<i class="fa fa-plus " aria-hidden="true"></i> </a><a class="btn btn-circle btn-icon-only btn-default red  delete-row" '+ 'data-row="row'+ i +'" href="javascript:;"><i class="fa fa-trash " aria-hidden="true" title="delete"></i> </a>'+
 '</td></tr>'

      $('tbody').append(html);

}


});

</script>

Using Each -loop :

$(document).ready(function(e) {

var json =
[
   {"SNo" : 1, "Name" : "Lulea", "Gender" : "Female"},
   {"SNo" : 2, "Name" : "Micheal", "Gender" : "male"},
   {"SNo" : 3, "Name" : "John", "Gender" : "male"}
];


$(json).each(function(index, element) {
   var html = '<tr class="adding-row"><td class="sn">' +  element.SNo + '</td><td>' + element.Name + '</td><td>' + element.Gender + '</td><td class="addrow">' +             '<a class="btn btn-circle btn-icon-only btn-default green add-row" data-row="row'+ 1 +'" href="javascript:;">' +
            '<i class="fa fa-plus " aria-hidden="true"></i> </a><a class="btn btn-circle btn-icon-only btn-default red  delete-row" '+
'data-row="row'+ 1 +'" href="javascript:;"><i class="fa fa-trash " aria-hidden="true" title="delete"></i> </a>'+
             '</td></tr>';

      $('tbody').append(html);
})

});


Step4:

Here is the Html mark-up  of the table..So, We are going to add the content via jquery inside the <tbody> Tag
 
<table id="mytable" width="100%" border="0">
                        <thead>
                          <tr>
                            <td valign="top"><table id="myTable" class="table table-bordered">
                              <thead>
                                <tr>
                                  <th> S.No</th>
                                  <th> Name </th>
                                  <th> Gender </th>
                                  <th>Action </th>
                                </tr>
                              </thead>
                              <tbody>
                               
                               
                            
                              </tbody>
                            </table></td>
                          </tr>
                      </table>


Step6:
Enjoy folks