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);
}
Ajouter multiple input dynamique

Ajouter multiple input dynamique

Create icon animate with svg

Create icon animate with svg

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Header with background animate 01

Header with background animate 01

Input file style02

Input file style02

Input range slider HTML style03

Input range slider HTML style03

Loading style water animation

Loading style water animation

Profile page with b4

Profile page with b4

Social Media Icons

Social Media Icons

Tablet style code texte

Tablet style code texte

Transitions Animations SVG Style01

Transitions Animations SVG Style01