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

Version imprimable

22/01/2014, 22h31
drogba72

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

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 :)
22/01/2014, 22h41
Auteur

bonjour,

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

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:

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

Voici les entêtes de colonne de mon tableau :

Code:

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:

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 ?

23/01/2014, 10h02
Auteur

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:

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.
23/01/2014, 10h24
drogba72

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

Citation:

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 :oops:
Qu'elle serait l'autre solution svp ?
23/01/2014, 19h29
Auteur

bonsoir,

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

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:

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++) { } } }

25/01/2014, 00h32
Auteur

Citation:

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

Code:

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.

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:

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

merci de votre aide :)

29/01/2014, 08h08
Bovino

Euh... ce sont mes yeux qui me trahissent ou tu mets vraiment du PHP dans le code JavaScript ? :calim2:
29/01/2014, 13h04
drogba72

Effectivement il y a une requête php dans le javascript afin de pré charger une liste déroulante avec d'autre valeurs.

Cela pose un problème ?
29/01/2014, 13h39
Bovino

En dehors du fait qu'il n'y a pas d'interpréteur PHP dans JavaScript ?
Non, à part ça, aucun problème ! :aie:
29/01/2014, 13h43
drogba72

La requête s'exécute très bien :mouarf:
29/01/2014, 19h57
NoSmoking

Bonjour,

Citation:

Envoyé par drogba72

La requête s'exécute très bien :mouarf:

aussi bien que sur cette discussion
http://www.developpez.net/forums/d14...e-cette-popup/

:dehors: