faire apparaitre input avec un "onClick"

KoQi22
Invité n'ayant pas de compte PHPfrance

21 mars 2014, 17:36

Bonjour,
j'ai un tableau de ce style :
echo '<table>';
       echo '<CAPTION>' . '
       tableau CSV ' . '</CAPTION> ';
       foreach ( $tableau as $tab ) {
               echo '<tr>';
               foreach ( $tab as $var ) {
                       
                       if ($var !== "\n" && $var !== "\" \"") {
                               if (in_array ( $nomDesString, $_SESSION ['TabErr'] )) {
                                       echo "<td><FONT COLOR='orangered'><b>$var</FONT></b></td>";
                               } else
                                       echo '<td>' . $var . '</td>';
                       }
               }
               echo '</tr>';
       }
       echo '</table>';
mais j'aimerai rajouter un option sur ma page qui est que quand l'utilisateur clique sur une case ou le chang est orange (donc qui contient une erreur) alors ce champ se change en input et l'utilisateur peut alors changer la variable ! une fois qu'il clique a coté alors le champs redevient du texte avec la valeur modifié par l'utilisateur !
mais je ne sais pas comment faire, surtout qu'il faut que la valeur changé se change également dans mon tableau $tab !

Je sais que pour gerer l'événement je peux utiliser OnClick en javascript mais pour le reste je suis paumé et je ne trouve pas mon bonheur sur le net, donc si vous avez des conseils je suis preneur !
Merci ;)

Eléphanteau du PHP | 13 Messages

21 mars 2014, 22:06

Bonsoir,

J'ai un peu de mal à comprendre, donc si je réponds à côté... :P

Pour transformer la case en input, il suffit (au clic) d'ajouter un input, de récupérer la valeur de la case et de l'insérer en valeur de l'input. Tous ça en JavaScript (côté client). Ensuite, si il faut que la validation de la saisie ce solde par une modification d'une donnée stockée dans une base de données ou un fichier, alors il faudra user d'une requête AJAX (qui se chargera de transmettre la donnée à votre script côté serveur, pour qu'il puisse procéder à la modification).

En somme, cela requiert la manipulation du DOM (code HTML), des événements (click, entrée [pour la validation - ou un bouton]) et bien sûr, la manipulation AJAX. Si vous connaissez bien JavaScript, vous pouvez user de frameworks comme JQuery pour faciliter un peu la lecture et l'écriture du code, sinon, faites-le en javascript pur.

Eléphant du PHP | 83 Messages

01 avr. 2014, 19:25

Bonsoir,

Pour commencer, il faut ajouter une classe CSS au '<td>' ayant une erreur donc on à par exemple "hasError":
...
if (in_array ( $nomDesString, $_SESSION ['TabErr'] )) {
    echo "<td class="hasError"><FONT COLOR='orangered'><b>$var</FONT></b></td>";
} else
...
Maintenant ton HTML doit ressembler à :
...
<td class="hasError"><FONT COLOR='orangered'><b>MAVAR1</FONT></b></td>
<td class="hasError"><FONT COLOR='orangered'><b>MAVAR2</FONT></b></td>
<td class="hasError"><FONT COLOR='orangered'><b>MAVAR3</FONT></b></td>
...
Maintenant le JS (JQuery):

[javascript]

$(document).ready(function()
{
$('.hasError').dblclick(function() {
//on récupère l'élément actuel
var current = $(this);
//on récupère le contenu l'élément actuel (si on veut annulé!!)
var currentContent = current.html();
//notre input à intégrer!
var myinput = '<input type="text" value="" class="geninput" >';
//on remplace le contenu du td par l'imput
current.html(myinput);
//quand notre input perd le focus c-a-d la sourie quitte le input.
geninput.focusout(function() {
//notre input
var currinput = $(this);

if(currinput.val() != ''){//si on a une valeur dans l'input
current.html(currinput.val());//on la place dans le td
}else{//sinon
current.html(currentContent);//on replace l’ancienne valeur
}
});
});
}

[/javascript]

voila en générale ce qu'il faut faire, j'ai pas tester le code mais c'est l'idée principale.
Bon Codage