Lignes d'un tableau éditables

Version imprimable

2 pièce(s) jointe(s)

Bonjours / Bonsoir à tous !

J'ai un tableau comme suit :

Pièce jointe 170529

Dés lors que je clique sur la petite "roue" pour éditer LA LIGNE, tous le tableau est éditable, voici mon bout de code :
Code:

1 2 3 4 5 6 7 8 9 10 /* ELEMENT EDITABLE */ jQuery(document).ready(function(){ $(".controlTd").click(function(){ $(".contenu td center").each(function(){ //on parcours tout les éléments (les <center> dans un <td> dans un <tr> dans le tableau de classe flatTable) var contenuElement = $(this).text(); //je récupère le contenu de l'élément <center> $(this).html("<input class='modif_input'STYLE='Text-ALIGN:center'/>"); //j'insère un input dans l'élément <center> ->le contenu est donc remplacé par un input vide $(this).children("input").val(contenuElement); //je sélectionne l'input dans l'élément center et je défini son contenu }); }); });
Je voudrais également l'ors du clique sur la croit d'une ligne, annuler tous les changement et rendre le contenu non éditable comme au début en fait ! Mais je ne sait pas du tout comment faire çela aurait vous des éxemples a me proposer ?

Pièce jointe 170527

Merci à vous tous !

N'ayant pas connaissance de ton code HTML je supposerai une réponse à partir de ma façon de faire.

Supposons donc que nous ayons une classe stop sur l'élément qui annule l'action.

Il suffirait de déclarer un événement comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 $('.stop').on('click', function () { var $this = $(this), $tr = $this.parents('tr'), $cells = $tr.find('td'); $cells.each(function (index, elt) { $(this).find('input[type="text"]').val(''); }); });

Merci beaucoup à toi d'avoir répondu donc, ce que tu me propose c'est pour tout annuler ?
Voici un bout de code du tableau :

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
 <form method="POST" id="form" name="form">
 
 <div class="top-shadow">
<table class="flatTable" table border="0" CELLSPACING="0" >
  <tr class="titleTr">
    <td class="titleTd">Liste des capteurs</td>
    <td colspan="4"></td>
    <td class="plusTd button"></td>
    <td class="plusTd3 button"></td>
	</div>
  </tr>
  <tr class="headingTr">
 <td>Index du capteur</td> 
<td><center>Nom du capteur</center></td> 
<td><center>Identifiant du capteur</center></td> 
<td><center>Type du capteur</center></td> 
<td><center>Table correspondant au capteur</center></td>
<td><center>Supprimer le capteur</center></td>
<td><center>Edition&nbsp;</center></td>
    <td></td>
  </tr>
<?php
//Affichage des informations
 
while ($tab_contenu=mysql_fetch_array($reponse)){
 
 
?> 
<tr class="contenu">
<td><center><?php echo $tab_contenu['Arexx_index']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Name']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Id']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Type']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Table']; ?></center></td>
<section title=".squaredFour">
    <!-- .squaredFour -->
    <div class="squaredFour">
     <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td>
 
 
      <label for="squaredFour"></label> 
    </div>
    <!-- end .squaredFour -->
  </section>
 <td class="controlTd"></td>
 <td class="controlTd1"></td>
 
 
 
</tr> 
 
 
</table>

Voici le code qui permet de changer les boutons lors du clique sur l'un des deux !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* changement bouttons */
jQuery(document).ready(function(){
	 $(".controlTd1").hide();
$(".controlTd").click(function(){
    $(this).fadeOut(0); //cacher ce bouton
    $(".controlTd1").fadeIn(0); //afficher l'autre
$(".controlTd").hide();
$(".controlTd1").click(function(){
    $(this).fadeOut(0); //cacher ce bouton
    $(".controlTd").fadeIn(0); //afficher l'autre
 
});
});
});

Donc du coup le bouton qui réalisera la fonction de tout annuler pour LA LIGNE est .controlTd1 comment réaliser ton code ?
Merci à toi

02/03/2015, 23h21
Darkaurora

il suffit de remplacer le .stop par .controlTdConcrètement le code que j'ai écris se traduit par "Lorsqu'on clique sur un bouton .controlTd on récupère la ligne via $this.parents('tr') puis les cellules de cette ligne via $cells = $tr.find('td'); puis pour chaque cellule on cherche un champ de type texte ou l'on définis la valeur avec une chaîne vide."

Maintenant la solution proposé est a adapter à la structuration de ton HTML à savoir que $this.parents('tr') peux ne pas fonctionner mais l'idée générale est là.
03/03/2015, 00h22
dayou05

Mmerci ! Ayant bien compris le principe cela fait 1h30 que je cherche car le code ne fonctionne pas :/
Cela pourrais venir de quoi ?

Bon, j'ai analyser plus soigneusement la problématique est voilà ce qu'on peut en dire:

1. Je ne respecte pas la charge avec mon exemple :)
2. Je n'avais pas fait attention que tu créais les input à la volée.

Bref reprenons:

Tu souhaites, si on annule, restaurer un état antérieur, pour cela je te suggère de créer une copie ton tableau de donnée côté PHP afin de fournir une variable JS, pour la simple raison qu'il faut avoir une version des données à l'état n-1.

En PHP tu implémentes un tableau de données que tu vas convertir par la suite en tableau ou objet JS:
Code:

1 2 3 4 5 6 7 $tab_contenu= array(); while (($tab_contenu[] = mysql_fetch_assoc($reponse)) OR array_pop($tab_contenu)); <script type="text/javascript"> var data = <?= json_encode(!empty($tab_contenu) ? $tab_contenu : array()); ?> </script>
Normalement avec un console.log(data); tu peux tout de suite visualiser que les données de data correspondent bien à celles de $tab_contenu. De plus et logiquement chaque ligne du tableau de donnée correspond à celle de ton tableau d'affichage.

Maintenant il faut repasser du côté dynamique:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $('.controlTd').on('click', function () { var $this = $(this), $tr = $this.closest('tr'), $cells = $tr.find('td'); var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index']; $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove(); $(this).find('center').text(data[$tr.index()][keyByIndex[index]]); });
Donc le principe ici est de supprimer les input et d'aller récupérer les valeurs par défaut qui sont dans le tableau data. Attention toutefois si tu valides des données il faudra donc remplacer la ligne correspondante dans "data" par les nouvelles valeurs. Ainsi "data" sera toujours une bonne représentation de tes données avant la validation de toutes modifications.

De plus lors de l'annulation je supprime les inputs et mets les valeurs directement dans les balises center.

03/03/2015, 12h55
dayou05

Bonjours !

Tout d'abord merci beaucoup pour cette réponse aussi complète j'ai encore appris un tas de choses et bien compris le code, simplement cela ne fonctionne pas.
Est - ce moi qui est mal adapter le code ? C'est à dire qui l'es mal écrit dans ma page au mauvais endroit ?

Car avec console.log(data) j'ai :

Citation:

console.log(data)
undefined
Array [ ]

Je cherche désespérément depuis quelque heures et je vient a votre secours

Merci beaucoup !
03/03/2015, 13h43
Darkaurora

Peux tu essayer un var_dump($tab_contenu, json_encode(!empty($tab_contenu) ? $tab_contenu : array())); avant le bloc script.
03/03/2015, 14h23
dayou05

Je suis désoler mais le "var_dump" je n'est pas réussit a le faire fonctionner ...
Seulement j'ai réussit avec console.log(data) qui me renvoi donc correctement les valeurs je pense :

Citation:

console.log(data)
undefined
Object { 0: "30", 1: "l", 2: "l", 3: "l", 4: "l", Arexx_index: "30", Arexx_Id: "l", Arexx_Type: "l", Arexx_Table: "l", Arexx_Name: "l" }

Ceci dit cela ne fonctionne toujours pas ...
Merci à vous.

Une première chose, tu as deux fois les mêmes informations dans ta variable data et pour cause tu n'a pas changer la méthode mysql_fetch_array par mysql_fetch_assoc.

La différence entre les deux est que la première te génères un tableau numériques et associatif, ex:
Array(
0 => 30,
1 => '|',
....
'Arexx_index' => 30,
'Arexx_Id' => '|',
....
);

Avec mysql_fetch_assoc tu n'auras qu'un seul exemplaire de ta donnée et cela fonctionnera déjà un peu mieux.

Tu peux trouver la doc de var_dump ici c'est une fonction PHP très utile pour déboguer.

Idéalement il faudrait utiliser var_dump de cette manière:
Code:

1 2 3 4 5 6 7 8 9 10 11 $tab_contenu= array(); while (($tab_contenu[] = mysql_fetch_assoc($reponse)) OR array_pop($tab_contenu)); /* Var_dump */ var_dump($tab_contenu); /* Fin du var_dump */ <script type="text/javascript"> var data = <?= json_encode(!empty($tab_contenu) ? $tab_contenu : array()); ?> </script>
Enfin une autre chose qui m’interpelle c'est le "undefined" qui s'affiche dans ta console, peux tu mettre une copie d'écran de ta console ou essaye d'analyser d'ou sort ce "undefined" qui veut littéralement dire "tu me demande quelque chose qui n'existe pas".

Par la suite je te conseille de mettre des console.log un peu partout dans la fonction de callback de l'événement click sur l'élément .controlTd il faut définir si:

Tu sélectiones le Table Row (tr)
Tu sélectiones bien les cellules
Si tu accèdes bien aux données de data

Dans un premier temps voici le var_dump qui fonctionne :

Code:

1
2
array(10) { [0]=> string(2) "32" ["Arexx_index"]=> string(2) "32" [1]=> string(1) "l" ["Arexx_Id"]=> string(1) "l" [2]=> string(1) "l" ["Arexx_Type"]=> string(1) "l" [3]=> string(1) "l" ["Arexx_Table"]=> string(1) "l" [4]=> string(1) "l" ["Arexx_Name"]=> string(1) "l" }
array(10) { [0]=> string(2) "30" ["Arexx_index"]=> string(2) "30" [1]=> string(1) "l" ["Arexx_Id"]=> string(1) "l" [2]=> string(1) "l" ["Arexx_Type"]=> string(1) "l" [3]=> string(1) "l" ["Arexx_Table"]=> string(1) "l" [4]=> string(1) "l" ["Arexx_Name"]=> string(1) "l" }

Ce que contient bien mon tableau, seulement voici le 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
<?php
//Affichage des informations
$tab_contenu = array();
while ($tab_contenu=mysql_fetch_array($reponse)){
 
	var_dump($tab_contenu);
 
 
 
?> 
<tr class="contenu">
<td><center><?php echo $tab_contenu['Arexx_index']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Name']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Id']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Type']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Table']; ?></center></td>
<section title=".squaredFour">
    <!-- .squaredFour -->
    <div class="squaredFour">
     <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td>
 
 
      <label for="squaredFour"></label> 
    </div>
    <!-- end .squaredFour -->
  </section>
 <td class="controlTd"></td>
 <td class="controlTd1"></td>
 
 
 
</tr> 
 
<?php var_dump($tab_contenu, json_encode(!empty($tab_contenu) ? $tab_contenu : array())); } ?> 
 
<script type="text/javascript">
 
  var data = <?= json_encode(!empty($tab_contenu) ? $tab_contenu : array()); ?>
 
</script>
 
</table>

Je n'est pas utiliser votre éxemple car il m'afficher une erreur "unexept end of file"
Voici le var_dump($tab_contenu, json_encode(!empty($tab_contenu) ? $tab_contenu : array())); avant le bloc script. :

Code:

1
2
array(10) { [0]=> string(2) "32" ["Arexx_index"]=> string(2) "32" [1]=> string(1) "l" ["Arexx_Id"]=> string(1) "l" [2]=> string(1) "l" ["Arexx_Type"]=> string(1) "l" [3]=> string(1) "l" ["Arexx_Table"]=> string(1) "l" [4]=> string(1) "l" ["Arexx_Name"]=> string(1) "l" } string(128) "{"0":"32","Arexx_index":"32","1":"l","Arexx_Id":"l","2":"l","Arexx_Type":"l","3":"l","Arexx_Table":"l","4":"l","Arexx_Name":"l"}"
array(10) { [0]=> string(2) "30" ["Arexx_index"]=> string(2) "30" [1]=> string(1) "l" ["Arexx_Id"]=> string(1) "l" [2]=> string(1) "l" ["Arexx_Type"]=> string(1) "l" [3]=> string(1) "l" ["Arexx_Table"]=> string(1) "l" [4]=> string(1) "l" ["Arexx_Name"]=> string(1) "l" } string(128) "{"0":"30","Arexx_index":"30","1":"l","Arexx_Id":"l","2":"l","Arexx_Type":"l","3":"l","Arexx_Table":"l","4":"l","Arexx_Name":"l"}"

Le plus curieux est que j'ai mis console.log() pour voir ou le code s’arrête et il s’avère qu'il s’arrête a la dernière ligne et rien ne ce passe quand même ! Cela est t'il normal ? :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
* suppression elements */
jQuery(document).ready(function()
{
$('.controlTd1').on('click', function () {
 
  var $this = $(this),
 
  $tr = $this.closest('tr'),
 
  $cells = $tr.find('td');
 
  var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index'];
 
  $cells.each(function (index, elt) {
 
    $(this).find('input[type="text"]').remove();
    $(this).find('center').text(data[$tr.index()][keyByIndex[index]]);
	console.log("Code qui s'arréte ici le console log ne s'affiche donc pas");
  });
  });
  });

Comment puis-je corriger cela et avancer ?
Excusez mon niveau débutant dans ce domaine merci !

Code:

1 2 3 4 5 6 7 <?php var_dump($tab_contenu, json_encode(!empty($tab_contenu) ? $tab_contenu : array())); } ?> <script type="text/javascript"> var data = <?= json_encode(!empty($tab_contenu) ? $tab_contenu : array()); ?> </script>
ce bout de code ne doit pas être dans la boucle par contre.

De plus il faut donc peupler un tableau que l'on passera au javascript.
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 $data= array(); while ($tab_contenu=mysql_fetch_array($reponse)){ $data[] = array($tab_contenu[0], $tab_contenu[1], $tab_contenu[2], $tab_contenu[3], $tab_contenu[4]); // Ici le reste de ton code pour afficher ton tableau } ?> <script type="text/javascript"> var data = <?= json_encode(!empty($data ) ? $data : array()); ?> </script> // Le reste de ton code JS $('.controlTd1').on('click', function () { var $this = $(this), $tr = $this.closest('tr'), $cells = $tr.find('td'); var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index']; $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove(); $(this).find('center').text(data[$tr.index()][index]); console.log(data[$tr.index()][keyByIndex[index]], $tr.index(), index); }); });
Pour le dernier console.log on cherche à savoir si on récupère bien la valeur qui doit aller dans la cellule (data[$tr.index()][keyByIndex[index]]), l'indice de la ligne du tableau qui correspond à la ligne du tableau de donnée ($tr.index), et enfin l'indice de la donnée (index).

J'ai conscience que l'algo ci dessus n'est pas forcément évident pour les néophytes si tu as le moindre problème avec une méthodologie ou une fonction n'hésite pas à demander.

1 pièce(s) jointe(s)

Voici le résultat de var_dump($tab_contenu, json_encode(!empty($tab_contenu) ? $tab_contenu : array())); :

Code:

1
2
array(10) { [0]=> string(1) "1" ["Arexx_index"]=> string(1) "1" [1]=> string(5) "17946" ["Arexx_Id"]=> string(5) "17946" [2]=> string(1) "1" ["Arexx_Type"]=> string(1) "1" [3]=> string(16) "tp_arexx_17946_1" ["Arexx_Table"]=> string(16) "tp_arexx_17946_1" [4]=> string(12) "Chaufferie_T" ["Arexx_Name"]=> string(12) "Chaufferie_T" } string(186) "{"0":"1","Arexx_index":"1","1":"17946","Arexx_Id":"17946","2":"1","Arexx_Type":"1","3":"tp_arexx_17946_1","Arexx_Table":"tp_arexx_17946_1","4":"Chaufferie_T","Arexx_Name":"Chaufferie_T"}"
array(10) { [0]=> string(1) "2" ["Arexx_index"]=> string(1) "2" [1]=> string(5) "17946" ["Arexx_Id"]=> string(5) "17946" [2]=> string(1) "3" ["Arexx_Type"]=> string(1) "3" [3]=> string(16) "tp_arexx_17946_3" ["Arexx_Table"]=> string(16) "tp_arexx_17946_3" [4]=> string(12) "Chaufferie_H" ["Arexx_Name"]=> string(12) "Chaufferie_H" } string(186) "{"0":"2","Arexx_index":"2","1":"17946","Arexx_Id":"17946","2":"3","Arexx_Type":"3","3":"tp_arexx_17946_3","Arexx_Table":"tp_arexx_17946_3","4":"Chaufferie_H","Arexx_Name":"Chaufferie_H"}"

J'ai bien mes valeurs de mon tableau :

Pièce jointe 170721

Le console log mis a la fin du JS ne fonctionne pas en cliquant sur la croix donc .controlTd1 et il m'ajoute un carrer blanc c'est tout!
Le script s’arrête à la deuxième ligne en partant de la fin du script : console.log($(this).find('center').text(data[$tr.index()][index])); car je n'est pas non plus de console.log tout simplement et que un console.log à la ligne d'avant : console.log($(this).find('input[type="text"]').remove()); fonctionne bien ce qui m'affiche : Object { length: 0, prevObject: Object, context: <td>, selector: "input[type="text"]" }

Voici donc le code en entier :

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
<?php
//Affichage des informations
$data= array();
while ($tab_contenu=mysql_fetch_array($reponse)){
 
	$data[] = array($tab_contenu[0], $tab_contenu[1], $tab_contenu[2], $tab_contenu[3], $tab_contenu[4]);
 
 
?> 
<tr class="contenu">
<td><center><?php echo $tab_contenu['Arexx_index']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Name']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Id']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Type']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Table']; ?></center></td>
<section title=".squaredFour">
    <!-- .squaredFour -->
    <div class="squaredFour">
     <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td>
 
 
      <label for="squaredFour"></label> 
    </div>
    <!-- end .squaredFour -->
  </section>
 <td class="controlTd"></td>
 <td class="controlTd1"></td>
 
 
 
</tr> 
 
<?php } var_dump($tab_contenu, json_encode(!empty($tab_contenu) ? $tab_contenu : array()));   ?> 
 
<script type="text/javascript">
 
  var data = <?= json_encode(!empty($data ) ? $data : array()); ?>
 
</script>
 <script type="text/javascript">
// Le reste de ton code JS
 
$('.controlTd1').on('click', function () {
 
  var $this = $(this),
 
  $tr = $this.closest('tr'),
 
  $cells = $tr.find('td');
 
  var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index'];
 
  $cells.each(function (index, elt) {
 
    $(this).find('input[type="text"]').remove();
    $(this).find('center').text(data[$tr.index()][index]);
	console.log(data[$tr.index()][keyByIndex[index]], $tr.index(), index);
  });
});
</script>
</table>

On va y arriver et merci beaucoup car à chaque fois je comprend très bien le code ce qui est quand même le but, même si il est préférable que cela fonctionne !

03/03/2015, 21h09
Darkaurora

Pour le var_dump qui pose problème c'est normal car la valeur $tab_contenu prend false lors de la dernière séquence de mysql_fetch_array c'est d'ailleurs ce qui permet de ne pas créer une boucle infinie.

pour avoir une idée réelle il suffit donc de remplacer, dans ce var_dump, $tab_contenu par $data.

Je pense qu’après cette étape tes données seront bien récupérés et fournis au JS par contre maintenant il faudra déboguer le JS que j'ai fournis.

Plusieurs approche pour ça, il va falloir vérifier que la variable $tr est bien un élément "tr" qui correspond à la ligne sur laquelle tu as cliqué pour annuler les modifications, puis que $cells est un bien un tableau d'élément dont chaque valeur correspond à chaque élément "td" de la ligne.

Je fournirais un JSfiddle et des impr écran pour te montrer ce que tu devrais récupérer normalement.
03/03/2015, 21h15
dayou05

Je te remercie ! J'ai éditer mon post
Je vais continuer a me creuser la tete pendant ce temps !
04/03/2015, 09h58
Darkaurora

Voila j'ai testé rapidement pour ma part ça fait l'essentiel essaye de t'en inspirer et pose des questions surtout si tu ne comprends pas quelque chose.

http://jsfiddle.net/ubqz4x6h/3/

Je pense que nous étions sur un malentendu enfin bref, il y a une petite partie sur laquelle il te faudra réfléchir: la checkbox n'est pas prise en charge avec ce que je te propose.
04/03/2015, 13h00
dayou05

2 pièce(s) jointe(s)

Wouaw ! C'est super ça fonctionne et après une heures de décorticage de code j'ai enfin compris !
Ce que je comprend pas juste, c'est pourquoi quand je clique su le bouton annuler dans JSFIDDLE la page ne se recharge pas, alors que dans mon cas elle se recharge ? Mais les valeurs reviennent comme avant c'est le principal.

Seulement si je veut rendre qu'une seule ligne du tableau modifiable, sachant que le nombre de ligne peut varier ( comme vous l'aurez compris ) et que j'ai un bouton éditer a chaque ligne qui s'ajoute ?
Et donc évidemment un bouton Annuler a chaque lignes et que je veut remettre les changements par défaut de chaque ligne ou je clique sur leurs bouton annuler ?

Je ne sait pas si je me suis comprendre voici des images :

Pièce jointe 170782
Pièce jointe 170783

En tout cas vous faite un super travail qui malgré tout m'aide bien à comprendre et à avancer !
Merci beaucoup !
04/03/2015, 14h13
Darkaurora

En fait c'est plutôt simple j'utilise des éléments <button> dans mon exemple que tu as certainement dû reprendre. Hors je crois me souvenir que ton tableau ce trouve dans un formulaire. Si on ne précise pas le type des boutons il considère qu'il s'agit de "submit" et dès que tu cliques il valide le formulaire et recharge ta page dans le cas ou tu lui as mis une action $_SERVER['PHP_SELF']
Pour palier ce problème il suffit de mettre <button type="button"></button>
Pour la deuxième partie du problème je pense qu'il suffit simplement par remplacer le bouton (ou l'image) d'édition par le bouton "annuler" as tu remarqué la classe que j'ajoute au tableau lorsque je le rend "editable" ? Elle permet de définir un état qui empêche l'action du bouton "Tout Annuler" pour ta problématique il te suffit d'ajouter une classe sur chaque <tr> en cours d'éditions.

La modification en rajoutant <button type="button"> Annuler </button> ne fonctione pas, plus rien ne fonctionne si ce n'est de rendre les inputs éditable.
Voici le code actuel :

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
103
104
105
106
107
108
109
110
111
112
<form method="POST" id="form" name="form">
 
 <div class="top-shadow">
<table class="flatTable" table border="0" CELLSPACING="0" >
  <tr class="titleTr">
    <td class="titleTd">Liste des capteurs</td>
    <td colspan="4"></td>
    <td class="plusTd button"></td>

				    <td class="plusTd3 button"></td>
	</div>
	
  </tr>
  <tr class="headingTr">
 <td>Index du capteur</td> 
<td><center>Nom du capteur</center></td> 
<td><center>Identifiant du capteur</center></td> 
<td><center>Type du capteur</center></td> 
<td><center>Table correspondant au capteur</center></td>
<td><center>Supprimer le capteur</center></td>
<td><center>Edition&nbsp;</center></td>
    <td></td>
  </tr>

 


<?php
//Affichage des informations
$data= array();
while ($tab_contenu=mysql_fetch_array($reponse)){

	$data[] = array($tab_contenu[0], $tab_contenu[1], $tab_contenu[2], $tab_contenu[3], $tab_contenu[4]);


?> 
<tr class="contenu">
<td><center><?php echo $tab_contenu['Arexx_index']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Name']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Id']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Type']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Table']; ?></center></td>
<section title=".squaredFour">
    <!-- .squaredFour -->
    <div class="squaredFour">
     <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td>
	

      <label for="squaredFour"></label> 
    </div>
    <!-- end .squaredFour -->
  </section>
 <td class="controlTd"></td>
 <td class="controlTd1"></td>
 
	
	
</tr> 

<?php  } var_dump($data, json_encode(!empty($data) ? $data : array()));   ?> 

<script type="text/javascript">
 
  var data = <?= json_encode(!empty($data ) ? $data : array()); ?>
 
</script>
 <script type="text/javascript">
var data = <?= json_encode(!empty($data ) ? $data : array()); ?>


var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index'];

$('.controlTd').on('click', function () {
    if (!$('.contenu').hasClass('isEditable')) {
        $(".contenu td center").each(function(){ 
            var contenuElement = $(this).text(); 
            $(this).html("<input class='modif_input'STYLE='Text-ALIGN:center'/>");
            $(this).children("input").val(contenuElement);
        });
    
        $('.contenu .controlTd1').empty().append('<button class="btn btn-danger" type="button">Annuler</button>');
        $('.contenu').addClass('isEditable');
    }
});

$('.controlTd1').on('click', function () {
    if ($('.contenu').hasClass('isEditable')) {
        $('.contenu').each(function () {
            $tr = $(this);
            $tr.find('td center').each(function (index) {
                $(this).find('input[type="text"]').remove();
                $(this).text(data[$tr.index()][keyByIndex[index]]);
            });
            $tr.find('.controlTd1').empty();
        });
         $('.contenu').removeClass('isEditable');
    }
});

// Délégation d'événement car le <button> n'est pas créer lors de la déclaration de l'événement.
$('.controlTd1').on('click', 'button', function () {
    var $this = $(this), 
        $tr = $this.closest('tr'),
        $cells = $tr.find('td');

    $cells.each(function (index, elt) { 
        $(this).find('input[type="text"]').remove();
        $(this).find('center').text(data[$tr.index()][keyByIndex[index]]);
    });
});
</script>
</table>

<td class="controlTd"></td> est le bouton pour rendre éditable les inputs
<td class="controlTd1"></td> est le bouton pour annuler.

Et comment puis-je ajouter une classe sur chaque <tr> en cours d'éditions automatiquement ?
La classe à ajouter est donc : <input class='modif_input'STYLE='Text-ALIGN:center'/> ou $('.contenu').addClass('isEditable'); ?

04/03/2015, 17h05
Darkaurora

Voici un nouvel exemple qui se rapproche plus de tes exigences je pense. ATTENTION, je n'utilise pas la même sémantique que toi, j'ai ajouté des <button> dans les cellules .controlTd et .controlTd1.

http://jsfiddle.net/ubqz4x6h/6/

Le fonctionnement coule de source néanmoins il y a quelques petites astuces que je tiens à expliquer:

Lors du chargement du DOM les boutons de modifications sont présents pour chaque ligne à modifier. Dans le JS je déclare deux objets jQuery qui sont les répliques respectives de ces deux boutons.

A chaque modification/annulation je clone les boutons et les insères dans les cellules correspondantes. Sans le clonage nous aurions n fois (n correspondant au nombre de ligne) le même bouton dans le tableau ce qui engendre que lorsqu'on en supprime un on les supprime tous.

C'est une particularité qui doit être connu. Si tu veux un exemple concret enlève le .clone() et essaye de rentre éditable toutes les lignes du tableau
04/03/2015, 17h33
dayou05

Ah oui d'accooooooord je viens de comprendre !
Il manque le bouton pour annuler les changements du coup ?
05/03/2015, 09h07
Darkaurora

Comment cela avance ? Si tu continues à rencontrer des problèmes n'hésite pas dans le cas contraire pense à noter le sujet comme résolu. :)
05/03/2015, 12h04
dayou05

Alors en fait, j'ai compris énormément de choses :
Voici le JSFIDDLE : https://jsfiddle.net/wqv47rab/1/

Simplement le premier code fonctionnais, a part que c'était tout le tableau et que la page se recharger malgré le type="button" ( Plus rien ne fonctionnais dans ce cas )
Mais avec le deuxième code rien ne marche !
Voilà si vous pouviez y jeter un coup d’œil merci à vous !
05/03/2015, 14h05
Bovino

Code:

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

Mais tu crois vraiment que JavaScript va interpréter ton code PHP ? :weird:
05/03/2015, 14h43
Darkaurora

Tout d'abord attention à bien comprendre ce que tu fais. Je pense qu'un petit tour sur la FAQ ne serait pas de trop pour toi. Enfin j'ai repris ta mise en page car je pense que le problème venait de la.

J'effectue une concordance entre le tableau d'affichage HTML et le tableau de donnée. Seulement il faut garder à l'esprit que ton tableau d'affichage contient deux lignes de plus que ton tableau de donnée.

De ce fait en retirant 2 à $tr.index() nous obtenons un fonctionnement normal.

cf: http://jsfiddle.net/ubqz4x6h/7/

J'ai relevé beaucoup de problème dans tes codes j'essaierais de reprendre ce que je peux quand j'aurais un peu plus de temps.
05/03/2015, 15h35
dayou05

Merci à vous, car en effet je suis bête Bovino, JavaScript ne peut lire :

Code:

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

si je ne me trompe, je n'y avait même pas penser je ne sais même pas pourquoi je devait être concentrer à autre choses, sa m'apprendra !?

En tout cas Darkaurora, tout fonctionne correctement maintenant ! Mon code était mal écrit c'est ça ? :/ Je suis désoler je suis une quiche, mais comme conseiller je vais passer plus de temps à lire les FAQ et des cours, plutôt que de me casser la tête à comprendre les codes même si j'ai appris énormément !

Juste quand vous venez de me donner votre jsfidle j’étais justement entrain de coder la partie pour cacher les boutons mais évidemment rien ne marcher !
Maintenant j'ai compris pourquoi, car c'est vrai que le premier code était complétement inapte.

La seule chose qui me reste incomprise est ce fameux :

Code:

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

car malgré de multiples recherches je ne trouve pas d’exemples adaptés à la compréhension et j'aimerais vraiment comprendre, sinon je risque de pas bien dormir :lol: !

Car si je rentre les valeurs a la mains ( comme dans le jsfidle ) il me les remplace bien par les valeurs de var data et tout fonctionne.

J'ai également fait un

Code:

<?php var_dump($data, json_encode(!empty($data) ? $data : array())); ?>

Je retrouve bien les valeurs de mon tableaux.
Jusque là c'est bon je comprend or si je remplace

Code:

var data = [ Les valeurs à la mains ]

par

Code:

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

plus rien ne fonctionne ce que je pense normal, j'ai essayé une multitudes de choses ( Changer de variables, rajouter des variables, refaire des tableaux etc... ) Mais sans succès !

De plus enlever -2 à $tr.index() effectivement j'ai compris ce qui clocher, mais si je rajoute une ligne de plus, -2 ne fonctionne plus sa sera -3, seulement il faudrait pouvoir compter avant le nombre de lignes du tableau car le nombres de lignes peut varier ! de façons à enlever le nombres, de lignes que contient le tableau.

Merci beaucoup !
05/03/2015, 15h56
Darkaurora
Pour passer un tableau PHP à une variable JS on utilise json_encode qui est une fonction PHP cf http://php.net/manual/en/function.json-encode.php.

Code:

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>

est égale à
Code:

1 2 3 4 5 var data = <?php if (!empty($data)) { echo json_encode($data); } else { echo json_encode(array()); }?>
json_encode peut ne pas arriver à "encoder" ta variable PHP à ce moment la il te retourne une erreur cf http://php.net/manual/en/function.json-last-error.php & http://php.net/manual/en/function.js...-error-msg.php

La manière de procéder:

La première chose est de vérifier que le tableau est bien rempli avec un var_dump($data); bien sur tu ne le vérifie pas dans ta boucle mais une fois qu'elle est terminé et que toutes tes informations sont récupérer.

Si tu est satisfait de tes données alors juste après le var_dump tu peux faire directement un echo json_encode($data); cela devrait t'afficher une chaîne de caractère qui te paraîtras peut être étrange mais qui correspond à ton tableau PHP, pour preuve tu devrais retrouver les informations qui y sont.

Si tout va bien jusque là alors tu vas dans ton block javascript et en dessous de la déclaration var data = <?= json_encode(!empty($data ) ? $data : array()); ?> tu écris un console.log(data);il faut que data ressemble le plus possible à ce que j'ai écrit à la main dans le jsFiddle si ce n'est pas le cas essaye de me fournir l'architecture des données afin que l'on puisse rectifié.

Pour la suite de la problématique avec $tr.index() tu ne dois incrémenter ou décrémenter l'indice statique 2 que j'ai mit uniquement si ton tableau commence avec N ligne de présentation et non de donnée.

ton tableau a 2 lignes de présentation j'ai mit 2 en statique.

si tu souhaite faire quelque chose de plus dynamique il suffit de compter toutes les tr avec une classe contenu et tous les tr puis de faire la différence des deux:

Code:

$('table').find('tr').length - $('table').find('tr.contenu').length
05/03/2015, 17h08
dayou05

Merci pour tes indications trés clair !

Pour le var_dump tout a l'air correct :

Code:

array(3) { [0]=> array(5) { [0]=> string(1) "0" [1]=> string(5) "17948" [2]=> string(1) "3" [3]=> string(16) "tp_arexx_17948_3" [4]=> string(12) "Chaufferie_T" } [1]=> array(5) { [0]=> string(1) "2" [1]=> string(5) "17946" [2]=> string(1) "3" [3]=> string(16) "tp_arexx_17946_3" [4]=> string(12) "Chaufferie_H" } [2]=> array(5) { [0]=> string(1) "4" [1]=> string(1) "l" [2]=> string(1) "l" [3]=> string(1) "l" [4]=> string(1) "l" } }

Pour le echo json_encode($data); voici ce que j'obtient :

Code:

[["0","17948","3","tp_arexx_17948_3","Chaufferie_T"],["2","17946","3","tp_arexx_17946_3","Chaufferie_H"],["4","l","l","l","l"]]

J'ai bien les valeurs de mon tableau.

Et enfin pour le console.log(data) voici ce que j'ai :

Code:

Array [ Array[5], Array[5], Array[5] ]

C'est correct non ?

Et pour le

Code:

$('table').find('tr').length - $('table').find('tr.contenu').length

ais-je le droit de faire :

Code:

$(this).find('center').text(data[$tr.index() - $('table').find('tr').length - $('table').find('tr.contenu').length][keyByIndex[index]]);

?

Merci encore !

Tu y es presque :D mais pour cette réponse je vais essayer de t'expliquer plutôt que de te donner le code tout fait :)

Tu récupère un tableau de tableau. Je le sais avant même que la console ne le dise car le résultat de json_encode est :

[["0","17948","3","tp_arexx_17948_3","Chaufferie_T"],["2","17946","3","tp_arexx_17946_3","Chaufferie_H"],["4","l","l","l","l"]]
Les tableaux sont formés délimités par des crochets "[]" et comme tu le sais tu accèdes a une valeur d'un tableau grâce à son indice par exemple:

console.log(data[0]); // ["0","17948","3","tp_arexx_17948_3","Chaufferie_T"]console.log(data[0][1]); // "17948"Ce que j'ai créer sur tous les jsfiddle que j'ai fais ce sont des objets. Les objets sont délimités par des accolades {} et pour accéder a une valeur d'un objet il suffit de le faire grâce à un indice spécial que l'on appelle "clé".
Code:

1 2 3 4 5 6 var data = [ {'Arexx_index': 1, 'Arexx_Id': 17946, 'Arexx_Type': 1, 'Arexx_Table': 'tp_arexx_A7946_1', 'Arexx_Name': 'Chaufferie_T'}, {'Arexx_index': 2, 'Arexx_Id': 17946, 'Arexx_Type': 3, 'Arexx_Table': 'tp_arexx_17946_3', 'Arexx_Name': 'Chaufferie_H'} ]; // data est un tableau contenant des objets console.log(data[0]) // Objet ou {'Arexx_index': 1, 'Arexx_Id': 17946, 'Arexx_Type': 1, 'Arexx_Table': 'tp_arexx_A7946_1', 'Arexx_Name': 'Chaufferie_T'} console.log(data[0]['Arexx_Id']); // 17946
On arrive maintenant à la partie critique:

J'ai écris:
Code:

1 2 3 4 5 6 7 var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index']; [...] $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove(); $(this).find('center').text(data[$tr.index() - 2][keyByIndex[index]]); });
En fait ici la variable keyByIndex permet juste de faire une relation entre la clé qui nous est nécessaire pour "data" et l'indice qui nous est renvoyé par .each(function(index, elt) {...si nous sommes à la deuxième cellule "td" donc à la cellule d'index 1 (car on commence à 0), de la ligne "tr" alors keyByIndex[index] == 'Arexx_Name' et donc (si on suppose que $tr.index() -2 est égale à 0) data[$tr.index() - 2][keyByIndex[index]] est égale à "Chaufferie_T" car en fait on a "binder" data[0]['Arexx_Name'] !

Sachant que le tableau "data" n'est pas dans le même ordre que l'affichage que tu souhaites en faire, comment pourrais tu t'y prendre faire en sorte que cela fonctionne ?

Et pour le: $('table').find('tr').length - $('table').find('tr.contenu').length ce ne serait pas très optimiser de faire comme tu l’envisage cependant ça fonctionnerai.

Il existe une méthode qui te permettrais de récupérer toutes les lignes qui ne sont pas du contenu (.contenu) et qui est: $('table').find('tr:not(.contenu)').lengthLe problème est que ce code ça ne fonctionnera pas en toutes situation. Dans le cas ou tu souhaites créer un tableau HTML avec en alternance une ligne de contenu et une ligne d'information ou de présentation etc... ça ne marchera pas.

La meilleur solution nous la verrons demain :lol:

05/03/2015, 18h43
dayou05

Après avoir relus 20 fois le message, je comprend qu'il serait plus judicieux de mettre mes données data dans l'ordre ?
Au lieu de changer l'ordre de keyByIndex ?

Ducoup j'ai quand même changer l'ordre de data :

Code:

Array [ "2", "Chaufferie_H", "17946", "3", "tp_arexx_17946_3" ]

c'a ma l'aiir correct mais ça n'a rien changer !

Pas de soucis pour la fonction

Code:

$('table').find('tr').length - $('table').find('tr.contenu').length

En fait si tu change l'ordre de data tu n'as plus besoin d'utiliser la variable keyByIndex:
Code:

1 2 3 4 5 6 var less =$('table').find('tr:not(.contenu)').length; $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove(); $(this).find('center').text(data[$tr.index() - less][index]); });
Si tu ne souhaites pas changer l'ordre de data alors tu utilises keyByIndex mais tu le remplis avec les indices de data dans l'ordre d'affichage de ton HTML:
Code:

1 2 3 4 5 6 7 var keyByIndex = [0, 5, 1, 2, 3, 4]; [...] var less =$('table').find('tr:not(.contenu)').length; $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove(); $(this).find('center').text(data[$tr.index() - less][keyByIndex[index]]); });

Juste quand tu m'a répondu j’étais entrain d'enlever le "keyByIndex", j'ai bien compris le principe !

Je viens juste de finir l'éssais avec, juste pour le kiff de la chose et sa marche impec !

Une petite explication du

Code:

.find('tr:not(.contenu)')

ce que l'on soustrait par la suite, effectivement pour la solution que je t'avait proposer au début, je l'avait déclarer dans une variable.
Tout marche impeccablement, je ne sait comment te remercier j'ai appris énormément et tout fonctionne, je met le sujet comme "résolu" avant de me replonger dans les bouquins car j'en est besoin.

Juste une précision, si je coche la checkbox que je clique sur le bouton pour modifier, puis annuler si je veut donc décocher la checkbox j'ai fait
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 if ($tr.hasClass('isEditable')) { $cells.each(function (index, elt) { $(this).find('input[type="text"]').remove(); $(this).find('center').text(data[$tr.index() - less][index]); }); $tr.removeClass('isEditable'); if(document.getElementById('squaredFour').checked){ document.getElementById('squaredFour').checked=false; } }
Cela fonctionne mais est-ce correct on va dire ?

Voilà en tout cas un très gros merci à toi !! :mrgreen:;):weird::P:ptdr:8-):mouarf::zoubi:

05/03/2015, 20h14
Darkaurora
oui c'est tout a fait correct cependant quitte à utiliser jQuery autant le faire jusqu'au bout:
Code:

1 2 3 if ($('#squaredFour').is(':checked')) { $('#squaredFour').attr('checked', false); }
pour ce qui est du .find('tr:not(.contenu)') il s'agit d'un sélecteur qui dit que l'on cherche tout les tr qui N'ont PAS la classe contenu

Fuseau horaire GMT +2. Il est actuellement 05h34.