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);
}
Transitions Animations SVG Style01

Transitions Animations SVG Style01

Titre section avec une anmation style01

Titre section avec une anmation style01

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Responsive image grid

Responsive image grid

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Nav Menu style01

Nav Menu style01

Input range slider HTML style05

Input range slider HTML style05

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Bootstrap4 datepicker

Bootstrap4 datepicker

Blog post card 01

Blog post card 01

Alert Bootstrap4 style01

Alert Bootstrap4 style01