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");
    }
}
Table bootstrap with Datatable

Table bootstrap with Datatable

Social Media Icons

Social Media Icons

Pie Charts

Pie Charts

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Image hover effects style

Image hover effects style

Image hover 07

Image hover 07

Image hover 05

Image hover 05

Image hover 04

Image hover 04

Convertir une div en image

Convertir une div en image

Asidebar Menu Style01

Asidebar Menu Style01

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire