Lignes d'un tableau éditables

Version imprimable

Voir 40 message(s) de cette discussion en une page

2 pièce(s) jointe(s)

Lignes d'un tableau éditables

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

Voir 40 message(s) de cette discussion en une page