Appending row to the table

Appending rows to the table one by one

by Rohit Bisht

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>

CSS

table{
        width: 100%;
        margin-bottom: 20px;
		border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }

JavaScript

$(document).ready(function(){
 appendOneByOne(0)
});

function appendOneByOne(i){
  if(i <100){
    setTimeout(function(){
      var name = "name "+i;
      var email = "email"+i+"@vvv.com";
      var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
      $("tbody").append(markup);
      i++;
      appendOneByOne(i);
    });
  }
}