Bonjour, merci pour votre réponse j'ai trouvé une vidéo qui correspond exactement a mes attentes mais le code ne marche pas comme sur la vidéo car je dois ajouter 2 colonnes de plus.
https://1bestcsharp.blogspot.com/2017/0 ... e-row.html
Le problème est que je met les infos de l'employé dans le formulaire mais seul le nom, la focntion et le site s'affiche, ni le numéro interne ni la ligne directe. Egalement dès que je veux sélectionner un utilisateur aucune réaction.
Je vous met mon code en dessous donc si vous voyez une erreur je suis tout ouïe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="search.css">
<script src=""></script>
<div class="conteneur">
<h2>Annuaire Téléphonie Fixe</h2>
<!--Zone de recherche"Rechercher un nom"-->
<input class="zoneSaisie" type="text" style="font-size:1.2em;width:350px" placeholder="Cliquez pour rechercher un nom" id="maRecherche" onkeyup="filtrer()">
<!--Code vidéo-->
<div class="container">
<div class="tab tab-1">
<table id="table" border="1">
</table>
</div>
<div class="tab tab-2">
<input type="text" name="fnom" id="fnom" placeholder="Prénom NOM">
<input type="text" name="ffonctionPoste" id="ffonctionPoste" placeholder="Fonction/Poste">
<input type="text" name="fnumeroInterne" id="fnumeroInterne" placeholder="Numéro Interne">
<input type="text" name="fligneDirecte" id="fligneDirecte" placeholder="Ligne Directe">
<input type="text" name="fsite" id="fsite" placeholder="Site">
<button onclick="addHtmlTableRow();">Ajouter un utilisateur</button>
<button onclick="editHtmlTbleSelectedRow();">Edit</button>
<button onclick="removeSelectedRow();">Supprimer un utilisateur</button>
</div>
</div>
<script>
var rIndex,
table = document.getElementById("table");
// check the empty input
function checkEmptyInput()
{
var isEmpty = false,
nom = document.getElementById("fnom").value,
fonctionPoste = document.getElementById("ffonctionPoste").value,
numeroInterne = document.getElementById("fnumeroInterne").value;
ligneDirecte = document.getElementById("fligneDirecte").value;
site = document.getElementById("fsite").value;
}
// add Row
function addHtmlTableRow()
{
// get the table by id
// create a new row and cells
// get value from input text
// set the values into row cell's
if(!checkEmptyInput()){
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell3 = newRow.insertCell(3),
cell3 = newRow.insertCell(4),
nom = document.getElementById("fnom").value,
fonctionPoste = document.getElementById("ffonctionPoste").value,
numeroInterne = document.getElementById("fnumeroInterne").value;
ligneDirecte = document.getElementById("fligneDirecte").value;
site = document.getElementById("fsite").value;
cell1.innerHTML = nom;
cell2.innerHTML = fonctionPoste;
cell3.innerHTML = numeroInterne;
cell3.innerHTML = ligneDirecte;
cell3.innerHTML = site;
// call the function to set the event to the new row
selectedRowToInput();
}
}
// display selected row data into input text
function selectedRowToInput()
{
for(var i = 1; i < table.rows.length; i++)
{
table.rows
.onclick = function()
{
// get the seected row index
rIndex = this.rowIndex;
document.getElementById("fnom").value = this.cells[0].innerHTML;
document.getElementById("ffonctionPoste").value = this.cells[1].innerHTML;
document.getElementById("fnumeroInterne").value = this.cells[2].innerHTML;
document.getElementById("fligneDirecte").value = this.cells[3].innerHTML;
document.getElementById("fsite").value = this.cells[4].innerHTML;
};
}
}
selectedRowToInput();
function editHtmlTbleSelectedRow()
{
var nom = document.getElementById("fnom").value,
fonctionPoste = document.getElementById("ffonctionPoste").value,
numeroInterne = document.getElementById("fnumeroInterne").value;
ligneDirecte = document.getElementById("fligneDirecte").value;
site = document.getElementById("fsite").value;
if(!checkEmptyInput()){
table.rows[rIndex].cells[0].innerHTML = nom;
table.rows[rIndex].cells[1].innerHTML = fonctionPoste;
table.rows[rIndex].cells[2].innerHTML = numeroInterne;
table.rows[rIndex].cells[3].innerHTML = ligneDirecte;
table.rows[rIndex].cells[4].innerHTML = site;
}
}
function removeSelectedRow()
{
table.deleteRow(rIndex);
// clear input text
document.getElementById("fnom").value = "";
document.getElementById("ffonctionPoste").value = "";
document.getElementById("fnumeroInterne").value = "";
document.getElementById("fligneDirecte").value = "";
document.getElementById("fsite").value = "";
}
</script>
<!--Tableau-->
<table class="tableau" id="tableau">
<tr>
<th class="pretitre1" style="width:60%;">Prénom Nom</th>
<th class="pretitre2" style="width:60%;">Fonction/Poste</th>
<th class="pretitre3" style="width:60%;">Numero Interne</th>
<th class="pretitre4" style="width:70%;">Ligne Directe</th>
<th class="pretitre5" style="width:70%;">Site</th>
<tr>
<td>Employé n°1 </td>
<td>Fonction eemployé n°1</td>
<td>Numéro Interne employé n°1</td>
<td>Ligne Directe employé n°1</td>
<td>Site employé n°1</td>
</tr>
--------La suite des employés-----------