waytolearnx

by waytolearnx

HTML

<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<table>
  <thead>
  <tr>    
    <th>Nom</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody></tbody>
</table>

<input id="nbrligne" placeholder="Nombre de lignes"/>
<button onclick="javascript:new_line($('table tbody')[0], $('#nbrligne').val(), ['Alex', 'alex@gmail.com'])">
  Ajouter une ligne
</button>
</body>
<footer>
  <p>Source : <a href="https://waytolearnx.com/">WayToLearnX</a></p>
</footer>
</html>

CSS

table {
    margin: 18px 0;
    width: 50%;
    border-collapse: collapse;
}
table th,
table td {
    text-align: left;
    padding: 6px;
}
table,
th,
td {
    border: 1px solid #000;
}

JavaScript

window.new_line = function(target, count, value) {
  for (var i=0; i < count; i++) {
    var line = $('<tr/>');
    for (var c = 0; c < value.length; c++) {
      line.append($('<td>'+value[c]+'</td>'));
    }
    $(target).append(line);
  }
}