Discussion :

[dayou05]

Bonjours / Bonsoir à tous !

J'ai un tableau comme suit :




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 :

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

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 ?




Merci à vous tous !

[Darkaurora]

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 :

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

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('');
  });
});

[dayou05]

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

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

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

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

[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à.

[dayou05]

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

[Darkaurora]

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

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

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

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

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.