Créer des tds dynamiquement dans une table html

<!DOCTYPE html>
<html>
<head>
    <title>Créer des tds dynamiquement dans une table html | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="Créer des tds dynamiquement dans une table html">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" />
</head>
<body class="container">
    <div class="row">
      <div class="col-12 mt-5">
        <button onclick="addRows('bdayTable')" class="btn btn-primary btn-md"><i class="fa fa-plus"></i> Ajouter une ligne</button> 
        <table id="bdayTable" class="table table-hover mt-3">
            <thead class="table-info">
              <tr id="enteterow">
                <td>&nbsp;</td>
                <td><strong >Nom</strong></td>
                <td><strong >Prénom</strong></td>
                <td><strong >Métier</strong></td>
                <td><strong >Expérience</strong></td>
              </tr>
            </thead>
            <tbody id="bodyData">
                <tr id="rowNum1">
                  <td><button onclick="deleteRowID(this)" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button></td>
                  <td><input name="inputname" id="inputname" type="text" class="form-control"></td>
                  <td><input name="inputprenom" id="inputprenom" type="text" class="form-control"></td>
                  <td><input name="inputjob" id="inputjob" type="text" class="form-control"></td>
                  <td><input name="inputexp" id="inputexp" type="text" class="form-control"></td>
                </tr>
            </tbody>
        </table>          
      </div>
    </div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

                                    
function addRows(tblName){
    var tbleid = document.getElementById(tblName);
    var tbody = document.getElementById("bodyData");
    var rowCount = tbleid.rows.length;
    var row = document.createElement("TR");
    var rowNum = 'rowNum' +rowCount;
    row.setAttribute('id', rowNum);
    //row.setAttribute('class', rowNum);
    //row.setAttribute('title', rowNum);
    var t1 = document.createElement("TD");
    t1.innerHTML='<button onclick="deleteRowID(this)" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>';
    var t2 = document.createElement("TD");
    t2.innerHTML='<input name="inputname" id="inputname'+rowNum+'" type="text"  class="form-control">';
    var t3 = document.createElement("TD");
    t3.innerHTML='<input name="inputprenom" id="inputprenom'+rowNum+'" type="text" class="form-control">';
    var t4 = document.createElement("TD");
    t4.innerHTML='<input name="inputjob" id="inputjob'+rowNum+'" type="text" class="form-control">';
    var t5 = document.createElement("TD");
    t5.innerHTML='<input name="inputexp" id="inputexp'+rowNum+'" type="text" class="form-control">';
    row.appendChild(t1);
    row.appendChild(t2);
    row.appendChild(t3);
    row.appendChild(t4);
    row.appendChild(t5);
    tbody.appendChild(row);
    //rowCount++;
}

function deleteRowID(link){
    var tbody = document.getElementById("bodyData");
    if (tbody.rows.length > 1){
        var row = document.getElementById(link.closest("tr").id);
        row.parentNode.removeChild(row);
    } else {
        console.log("Au moins un éléménet");
    }
}
Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Blog post card 01

Blog post card 01

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Compteur avec b4

Compteur avec b4

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Input file style01

Input file style01

Organization Chart

Organization Chart

Timeline style02

Timeline style02

Vidéo background en html5 style02

Vidéo background en html5 style02

texte animate effects style 01

texte animate effects style 01