Ajout/modification de ligne d'un tableau à la volée

**drogba72** · 22/01/2014, 23h31

Bonjour,

Je suis plutôt débutant en programmation web, j'ai débuté un projet récemment et je souhaiterais de l'aide afin d'orienter mes choix svp.

Imaginons qu'il s'agisse d'une page regroupant des produits. Ceux-ci seraient présentés dans un tableau. Le tableau aurait une entête 'produits' et tout à droite un bouton '+' (ce dernier servirait pour ajouter des lignes à la volée) et serait composé de trois colonnes 'nom', 'statut', 'action'.
Chaque ligne créée serait accessible en saisie direct :
champ de saisie pour le colonne 'nom', liste déroulante pour la colonne statut et des boutons modifier et supprimer pour la colonne action.
Il faudra certainement définir une action pour valider la ligne mais je n'y ai pas pensé.

Une fois valider, ces lignes seraient modifiables et supprimables à chaque clic sur les boutons des lignes respectives.

J'espère qu'à travers les mots précédents, que le fonctionnement souhaité est compréhensible.
Il s'agit du résultat final, aujourd'hui j'ai mon tableau par contre je cherche les possibilités qui s'offrent à moi pour y parvenir. Je pense qu'il s'agit de javascript puisque tout se passera côté client mais c'est tout ce que je peux hypothéquer

Qu'en pensez vous svp ?
Merci par avance d'avoir pris le temps de me lire

**Auteur** · 22/01/2014, 23h41

bonjour,

je pense que tu trouveras toutes les réponses ici :
http://javascript.developpez.com/faq...pt/?page=Table

**drogba72** · 23/01/2014, 00h37

Super doc !!!!
Merci.

Je me permet de mettre un peu de code pour continuer sur ce sujet svp :

J'ai un lien qui appel ma fonction addRow() :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="addRow();"><i class="icon-plus-sign"></i></a>

Voici les entêtes de colonne de mon tableau :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<th style="display:none">Id </th>
<th>Nom produit</th>
<th>Stock critique</th>  
<th>Statut</th>   
<th>Action</th>

Et voici mes fonctions addrow() et deleteRow() :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function addRow(){
 
		var cell, ligne;
 
	    // on récupère l'identifiant (id) de la table qui sera modifiée
	    var tableau = document.getElementById("tabAlertes");
	    // nombre de lignes dans la table (avant ajout de la ligne)
	    var nbLignes = tableau.rows.length;
 
	    ligne = tableau.insertRow(-1); // création d'une ligne pour ajout en fin de table
	                                   // le paramètre est dans ce cas (-1)
 
	    // création et insertion des cellules dans la nouvelle ligne créée
	    cell = ligne.insertCell(0);
	    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";
 
	    cell = ligne.insertCell(1);
	    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";
 
	    cell = ligne.insertCell(2);
	    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";
 
	    cell = ligne.insertCell(3);
	    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";
 
	    cell = ligne.insertCell(4);
	    cell.innerHTML = '<a class="btn btn-info" href="#" ><i class="icon-edit icon-white"></i></a> <a class="btn btn-danger" href="#" onclick="deleteRow();"><i class="icon-trash icon-white"></i></a>' ;
	}
 
	function deleteRow(){
	    var n;
 
	    alert(obj.parent().parents('tr:eq(0)').find('td:eq(0)').text());
 
	    // on récupère l'identifiant (id) de la table qui sera modifiée
	    var tableau = document.getElementById("tabAlertes");
	    // nombre de lignes dans la table (avant suppression de la ligne n)
	    var nbLignes = tableau.rows.length;
 
	    n = obj.parent().parents('tr:eq(0)').find('td:eq(0)').text();
 
	    if (n < 0 || n > (nbLignes-1))
	    {
	        alert("Erreur, valeur incorrecte");
	        return;
	    }
 
	    if (tableau.rows.length)
	    {
	        tableau.deleteRow(n); // suppression d'une ligne à l'index n
	    }
	}

Plusieurs questions :

1 - Du coup, pour que mon utilisateur saisisse une ligne mes cellules doivent elles contenir des input ? ou y a t'il un autre moyen ?
2- Une fois ma ligne siaise, comment faire pour que la ligne ne soit plus accessible ?
3 - Dans ma cinquième colonne, deux boutons seront insérés à chaque fois, 'modifier' et 'supprimer'. Sur le deuxième, j'appelle ma fonction deleteRow() sauf que j'ai bien l'impression que je ne rentre pas dans cette fonction, une idée svp ?

**Auteur** · 23/01/2014, 11h02

1- Oui les cellules doivent contenir des input. Une fois la cellule créée il faut créer l'input avec les fonction DOM createElement() puis l'insérer dans la cellule avec la fonction appendChild()

2- Simplement en spécifiant l'attribut enable=false à tes input

3- il y a sans doute une erreur à ce niveau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

n = obj.parent().parents('tr:eq(0)').find('td:eq(0)').text();

(cette syntaxe est curieuse d'ailleurs).
Mais il y a plus simple : envoyer en paramètre l'index de la ligne cliquée pour la supprimer.

**drogba72** · 23/01/2014, 11h24

Pour les deux premières réponses, je test ça ce soir.

Envoyé par Auteur

Mais il y a plus simple : envoyer en paramètre l'index de la ligne cliquée pour la supprimer.

C'est ce que je souhaitait faire avec ce code

Qu'elle serait l'autre solution svp ?

**Auteur** · 23/01/2014, 20h29

bonsoir,

tu as un exemple complet dans cette discussion (2ème message) :
http://www.developpez.net/forums/d33...gne-d-tableau/

**drogba72** · 23/01/2014, 21h18

Désolé pour le double post, je vous fait part de mes avancées.

J'ai trouvé l'id du tableau

Je continu dans mon apprentissage et je souhaite parcourir mon tableau, en fait je souhaite simplement parcourir mon tableau afin d'éviter de faire une double insetion de ligne vide.
Pour cela je souhaite compte le nombre de ligne où ma colonne 1 sera vide svp.

J'ai commencer, mais impossible de trouver comment récupérer la valeur d'une cellule

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function parcoursTableau(){
	    // on récupère l'identifiant (id) de la table qui sera modifiée
	    var tableau = document.getElementById("tabAlertes");
	    // nombre de lignes dans la table (avant suppression de la ligne n)
	    var nbLignes = tableau.rows.length;
	    if (tableau.rows.length){
	    	for (var i = 0, c = nbLignes; i < c; i++) {
	    	}
	    }
	}

**Auteur** · 25/01/2014, 01h32

mais impossible de trouver comment récupérer la valeur d'une cellule

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("idCellule").innerHTML.

mais si la cellule contient un input il faut cibler l'input en question et récupérer sa valeur avec l'attribut value.

**drogba72** · 28/01/2014, 21h09

Bon en fait, je n'ai pas l'id de ma ligne...

J'ai regardé attetivement le post que vous m'avez conseillé mais ...
le ligne est en undifined :/

Voici les quelques lignes de code :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
function addRow(){
	var cell, num_ligne;
	// on récupère l'identifiant (id) de la table qui sera modifiée
	var tableau = document.getElementById("tabAlertes");
	// nombre de lignes dans la table (avant ajout de la ligne)
	var nbLignes = tableau.rows.length;
	if (parcoursTableau() == true){
		num_ligne = tableau.insertRow(-1); // création d'une ligne pour ajout en fin de table
		// le paramètre est dans ce cas (-1)
		// création et insertion des cellules dans la nouvelle ligne créée
		cell = num_ligne.insertCell(0);
		cell.innerHTML = 'id';
		cell = num_ligne.insertCell(1);
		cell.innerHTML = num_ligne.rowindex;
		cell = num_ligne.insertCell(2);
		cell.innerHTML = '<?php 
		// Récupération des données
		try{
			$html = '<select id="selectProduit" >';
			$html .= '<option value="choose">Selectionnez votre produit</option>';
			// On envois la requète
			$select = $connection->query("SELECT * FROM KS_PRODUITS ");
			// On indique que nous utiliserons les résultats en tant qu'objet
			$select->setFetchMode(PDO::FETCH_OBJ);
			// Nous traitons les résultats en boucle
			while( $enregistrement = $select->fetch()){	
				// Affichage des enregistrements
				$html .= '<option value="'.$enregistrement->PDT_ID.'">'.$enregistrement->PDT_NOM.'</option>';
			}
			$html .= '</select>';
		     	echo addslashes($html);
		} 
		catch ( Exception $e ){
			echo "Une erreur est survenue lors de la récupération des produits";
		}
		?>';
		cell = num_ligne.insertCell(3);
		cell.innerHTML = '<input type="text" id="InputChiffre" size="5">' ;
		cell = num_ligne.insertCell(4);
		cell.innerHTML = '<select id="selectNature" > <option value="1">Actif</option> <option value="0">Inactif</option> </select>';
		cell = num_ligne.insertCell(5);
		cell.innerHTML = '<a class="btn btn-success" href="#" ><i class="icon-check icon-white"></i></a> <a class="btn btn-danger" href="#" onclick="doSuppr(num_ligne);"><i class="icon-trash icon-white"></i></a>' ;
		cachePremiereColonne()
	}
}
function deleteRow(ligne){
	//var ligne = document.getElementById("tabAlertes").insertRow(-1);
	//Peut être faudra t'il faire deux manières de supprimer une ligne
	// Première manière : la ligne vient d'être rajouter donc pas d'id (donc dernière ligne)
	// Deuxième on souhaite supprimer une ligne qui est dans la BDD donc avec un id	 
	alert(ligne);
	// on récupère l'identifiant (id) de la table qui sera modifiée
	var tableau = document.getElementById("tabAlertes");
	// nombre de lignes dans la table (avant suppression de la ligne n)
	var nbLignes = tableau.rows.length;
	//n = nbLignes-1;
	if (ligne < 0 || ligne > (nbLignes-1)){
	        alert("Erreur, valeur incorrecte");
	        return;
	}
	if (tableau.rows.length){
		tableau.deleteRow(ligne.rowIndex); // suppression d'une ligne à l'index n
	}
}
function doSuppr(row) {
	return function() {
		deleteRow(row);
	};
}
function parcoursTableau(){
	var compteLigneSansId;
	// on récupère l'identifiant (id) de la table qui sera modifiée
	var tableau = document.getElementById("tabAlertes");
	// nombre de lignes dans la table (avant suppression de la ligne n)
	var nbLignes = tableau.rows.length;
	if (tableau.rows.length > 1){
		compteLigneSansId = 0;
	    	for (var i = 1, c = nbLignes; i < c; i++) {
			var valeur_colonne = tableau.rows[i].cells[0].textContent; 
		    if (valeur_colonne == 'id'){
	    	    	compteLigneSansId++;
	    	    }  
	    	}
	    	if (compteLigneSansId == 1){
			alert('Une ligne est déjà en cours de saisie');
			return false;
	    	}
	}
	return true;
}
function cachePremiereColonne(){
	// on récupère l'identifiant (id) de la table qui sera modifiée
	var tableau = document.getElementById("tabAlertes");
	// nombre de lignes dans la table (avant suppression de la ligne n)
	var nbLignes = tableau.rows.length;
	if (tableau.rows.length > 1){
		for (var i = 1, c = nbLignes; i < c; i++) {
	    		//cache la première colonne
	    		tableau.rows[i].cells[0].style.display = "none"; 
	    	}
	}
}