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> </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");
}
}
