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);
}
texte animate effects style 01

texte animate effects style 01

Timeline style04

Timeline style04

Loading Style snake

Loading Style snake

Input range slider HTML style01

Input range slider HTML style01

Image hover 05

Image hover 05

Form contact avec validation en css

Form contact avec validation en css

Créer une input search animée

Créer une input search animée

Card Bootstrap4 02

Card Bootstrap4 02

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Background div gradient

Background div gradient

Asidebar Menu Style01

Asidebar Menu Style01

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table