Ajout ligne de tableau via formulaire

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Deca
Messages : 2
Enregistré le : 05 mai 2022, 08:15

Ajout ligne de tableau via formulaire

Message par Deca » 05 mai 2022, 08:39

Bonjour, je demande votre aide car je suis bloqué sur un problème.
Je dois dans le cadre de mon stage créer un annuaire téléphonique, j'ai réussi à tout faire sauf une chose que je n'arrive pas car je ne connais pas le javascript.
J'aimerai via un formulaire pouvoir créer une ligne de tableau html comprenant 5 cellules (Prenom Nom, Fonction/Poste, Numéro Interne, Ligne Directe, Site), il faudrait donc de ce que j'ai vu créer 5 input pour chacune des mes conditions ainsi que 2 boutons (Ajouter un utilisateur et Supprimer un utilisateur). Le tableau avec les employés actuel est déjà fait donc il faudrait ajouter les nouveau utilisateurs sur le tableau déjà existant.
J'ai trouvé un site qui veux plus ou moins faire ce que je veux mais le code de marche pas et n'est évidemment pas adapté pour mon problème je vous le donne pour que vous compreniez ma demande https://waytolearnx.com/2019/07/comment ... query.html
Et est-t 'il possible en javascript que les nouveaux utilisateurs ajoutés avec le formulaires soit sauvegardés sur la page et non supprimer a chaque refresh ?
En espérant que quelqu'un puisse m'aider je vous remercie d'avance !

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Ajout ligne de tableau via formulaire

Message par webmaster » 06 mai 2022, 10:28

Bonjour,

Le javascript côté navigateur ne permet pas de stocker des informations de manière fiable et centralisée.
Il faut un stockage côté serveur d'hébergement avec une base de données.
On n'est plus ici dans l'interface de saisie de l'utilisateur mais côté SQL.
Pour avancer, il faut connaître les possibilités de l'hébergement. Il s'agit très souvent du langage PHP et de la base de donnée MySQL.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Deca
Messages : 2
Enregistré le : 05 mai 2022, 08:15

Re: Ajout ligne de tableau via formulaire

Message par Deca » 06 mai 2022, 14:47

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-----------

Répondre