Ajouter supprimer dynamiquement des lignes sur un tableau

<!DOCTYPE html>
<html>
<head>
<title>AJOUTER SUPPRIMER DYNAMIQUEMENT DES LIGNES SUR UN TABLEAU | 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="AJOUTER SUPPRIMER DYNAMIQUEMENT DES LIGNES SUR UN TABLEAU">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body onload="createTable()">
  <div class="container">
    <div class="row mt-5">
      <div class="col-lg-12">
          <p>
              <input type="button" id="addRow" value="Add New Row in table" class="btn btn-info btn-md" onclick="addRow()" />
          </p>
          <div id="cont"></div>
          <p><input type="button" id="bt" value="Send Data" class="btn btn-success btn-md" onclick="submit()" /></p>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
table { width: 70%; }
table, th, td { border: solid 1px #DDD;
    border-collapse: collapse; padding: 2px 3px; text-align: center;
}
var arrHead = new Array();
arrHead = ['', 'Full name', 'Country', 'Job']; // table headers.

// first create a TABLE structure by adding few headers.
function createTable() {
    var dynamicTable = document.createElement('table');
    dynamicTable.setAttribute('id', 'dynamicTable');  // table id.
    dynamicTable.setAttribute('class', 'table table-hover');

    var tr = dynamicTable.insertRow(-1);

    for (var h = 0; h < arrHead.length; h++) {
        var th = document.createElement('th'); // the header object.
        th.innerHTML = arrHead[h];
        tr.appendChild(th);
    }

    var div = document.getElementById('cont');
    div.appendChild(dynamicTable);    // add table to a container.
}

// function to add new row.
function addRow() {
    var empTab = document.getElementById('dynamicTable');

    var rowCnt = empTab.rows.length;    // get the number of rows.
    var tr = empTab.insertRow(rowCnt); // table row.
    tr = empTab.insertRow(rowCnt);

    for (var c = 0; c < arrHead.length; c++) {
        var td = document.createElement('td');          // TABLE DEFINITION.
        td = tr.insertCell(c);

        if (c == 0) {   // if its the first column of the table.
            // add a button control.
            var button = document.createElement('input');

            // set the attributes.
            button.setAttribute('type', 'button');
            button.setAttribute('value', 'Remove');
            button.setAttribute('class', 'btn btn-danger btn-md');

            // add button's "onclick" event.
            button.setAttribute('onclick', 'removeRow(this)');

            td.appendChild(button);
        }
        else {
            // the 2nd, 3rd and 4th column, will have textbox.
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
            ele.setAttribute('class', 'form-control');
            ele.setAttribute('value', '');

            td.appendChild(ele);
        }
    }
}

// function to delete a row.
function removeRow(oButton) {
    var empTab = document.getElementById('dynamicTable');
    empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // buttton -> td -> tr
}

// function to extract and submit table data.
function submit() {
    var myTab = document.getElementById('dynamicTable');
    var arrValues = new Array();

    // loop through each row of the table.
    for (row = 1; row < myTab.rows.length - 1; row++) {
        // loop through each cell in a row.
        for (c = 0; c < myTab.rows[row].cells.length; c++) {
            var element = myTab.rows.item(row).cells[c];
            if (element.childNodes[0].getAttribute('type') == 'text') {
                arrValues.push("'" + element.childNodes[0].value + "'");
            }
        }
    }
    
    // finally, show the result in the console.
    console.log(arrValues);
}
bootstrap4 tabs

bootstrap4 tabs

Timeline style04

Timeline style04

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Scroll to div ID

Scroll to div ID

Profile page with b4

Profile page with b4

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Geocoded Locations

Geocoded Locations

Form login 02

Form login 02

Drag and drop or upload input file

Drag and drop or upload input file

Create icon animate with svg

Create icon animate with svg

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table