Page 1 sur 1

problème avec onClick

Posté : 20 janv. 2012, 16:47
par Kapov
Bonjour a tous
aujourd'hui j'ai découvert cette fonction qui pourrais m’être bien utile mais qui ne serais pas assez complète, je vous explique...
j'ai un tableau du style
Image utilisateur
Image
dans chaque case [bloqué en écriture avec "readonly="readonly""] on va relever des données (températures) a partir d'une base de donnée.
Ce que je devrais faire c'est que, lorsque je clique sur rat1 j'affiche un " / " pour indiquer que les températures ne seront pas prisent (derrière je vais devoir développer des requêtes au protocole ModBusTCP qui iront dire a l'API de la machine de prise de mesure qu'on ne prend pas certaines températures enfin ça sera plus tard!)
ou lorsque je clique sur tête ou les autres parties du corps on m'affiche " / " pour indiquer que les températures ne sont pas prisent.
Sur internet j'ai trouvé la fonction onClick qui permet de changer la valeur de mes zones de texte...
Sauf que cette fonction ne me permet pas lorsque je ré-appuie sur le bouton de me re-afficher la température que j'avais initialement...
Est-ce que quelqu'un aurais une solution à ce problème, ou m'aider a développer une solution ?

Re: problème avec onClick

Posté : 20 janv. 2012, 17:16
par xTG
Il faut les stocker dans un array JS sinon en effet tu ne les récupéreras jamais. ^^
Tu peux former ton array avec une boucle PHP (de la même façon que tu dois former ton tableau HTML je suppose).

Et ainsi obtenir quelque chose du genre :
<script type="text/javascript">
var tabTete = [1,2,3,4,5,6,7]; // 7 valeurs pour tes 7 colonnes
var tabCorps = [1,2,3,4,5,6,7];
var tabQueu = [1,2,3,4,5,6,7];

// L'état de notre affichage
var etatTete = true;
var etatCorps = true;
var etatQueu = true;

/*
* Notre fonction pour afficher/enlever les valeurs
* @param (String) nom de la ligne
*/
function switchValeurs(ligne){
  if( ligne == "tete" ){
    etatTete = !etatTete; // on inverse l'état
    for(i=0; i<7; i++){
      if( etatTete == true ) // on doit afficher les valeurs
        document.getElementById('tete_' + i).value = tabTete[i];
      else // on affiche la barre
        document.getElementById('tete_' + i).value = '/';
    }
  } // ect pour les deux autres
}
</script>
<table>
<tr>
  <td><button onclick="switchValeur('tete');">tête</button></td>
  <td><input type="text" name="tete_0" id="tete_0" value="0" /></td>
  <td><input type="text" name="tete_1" id="tete_1" value="1" /></td>
  <td><input type="text" name="tete_2" id="tete_2" value="2" /></td>
ect....
Et on peut obtenir quelque chose du même genre pour les colonnes en réfléchissant bien. :)

Re: problème avec onClick

Posté : 20 janv. 2012, 17:46
par Kapov
Merci pour votre réponse j'ai développé le reste de l'application, et le code est le suivant:

Code : Tout sélectionner

<script type="text/javascript"> var tabTete = [1,2,3,4,5,6,7]; // 7 valeurs pour tes 7 colonnes var tabCorps = [1,2,3,4,5,6,7]; var tabQueu = [1,2,3,4,5,6,7]; // L'état de notre affichage var etatTete = true; var etatCorps = true; var etatQueu = true; /* * Notre fonction pour afficher/enlever les valeurs * @param (String) nom de la ligne */ function switchValeurs(ligne) { if( ligne == "tete" ) { etatTete = !etatTete; // on inverse l'état for(i=0; i<7; i++) { if( etatTete == true ) // on doit afficher les valeurs document.getElementById('tete_' + i).value = tabTete[i]; else // on affiche la barre document.getElementById('tete_' + i).value = '/'; } } if( ligne == "corps" ) { etatCorps = !etatCorps; // on inverse l'état for(i=0; i<7; i++) { if( etatTete == true ) // on doit afficher les valeurs document.getElementById('corps_' + i).value = tabCorps[i]; else // on affiche la barre document.getElementById('corps_' + i).value = '/'; } } if( ligne == "queu" ) { etatQueu = !etatQueu; // on inverse l'état for(i=0; i<7; i++) { if( etatQueu == true ) // on doit afficher les valeurs document.getElementById('queu_' + i).value = etatQueu[i]; else // on affiche la barre document.getElementById('queu_' + i).value = '/'; } } } </script> <html> <table> <tr> <td><button onclick="switchValeur('tete');">tête</button></td> <td><input type="text" name="tete_1" id="tete_1" value="1" /></td> <td><input type="text" name="tete_2" id="tete_2" value="2" /></td> <td><input type="text" name="tete_3" id="tete_3" value="3" /></td> <td><input type="text" name="tete_4" id="tete_4" value="4" /></td> <td><input type="text" name="tete_5" id="tete_5" value="5" /></td> <td><input type="text" name="tete_6" id="tete_6" value="6" /></td> <td><input type="text" name="tete_7" id="tete_7" value="7" /></td> </tr> <tr> <td><button onclick="switchValeur('corps');">corps</button></td> <td><input type="text" name="corps_1" id="corps_1" value="1" /></td> <td><input type="text" name="corps_2" id="corps_2" value="2" /></td> <td><input type="text" name="corps_3" id="corps_3" value="3" /></td> <td><input type="text" name="corps_4" id="corps_4" value="4" /></td> <td><input type="text" name="corps_5" id="corps_5" value="5" /></td> <td><input type="text" name="corps_6" id="corps_6" value="6" /></td> <td><input type="text" name="corps_7" id="corps_7" value="7" /></td> </tr> <tr> <td><button onclick="switchValeur('queu');">queu</button></td> <td><input type="text" name="queu_1" id="queu_1" value="1" /></td> <td><input type="text" name="queu_2" id="queu_2" value="2" /></td> <td><input type="text" name="queu_3" id="queu_3" value="3" /></td> <td><input type="text" name="queu_4" id="queu_4" value="4" /></td> <td><input type="text" name="queu_5" id="queu_5" value="5" /></td> <td><input type="text" name="queu_6" id="queu_6" value="6" /></td> <td><input type="text" name="queu_7" id="queu_7" value="7" /></td> </tr> </table> </html> <?php ?>
j'essaye un peut de comprendre le code suivant:

Code : Tout sélectionner

if( ligne == "tete" ) { etatTete = !etatTete; // on inverse l'état for(i=0; i<7; i++) { if( etatTete == true ) // on doit afficher les valeurs document.getElementById('tete_' + i).value = tabTete[i]; else // on affiche la barre document.getElementById('tete_' + i).value = '/'; } }
mais il reste un peut confus pouvez m'expliquer un peut la chose :s

Re: problème avec onClick

Posté : 20 janv. 2012, 18:34
par xTG
if( ligne == "tete" ) // la fonction a été appelée à partir du bouton de la ligne tête
   {
    etatTete = !etatTete; // on inverse l'état (false = '/', true = affichage valeur)
    for(i=0; i<7; i++) // on a 7 input numérotés de 0 à 6
   {
     if( etatTete == true ) // on doit afficher les valeurs
       document.getElementById('tete_' + i).value = tabTete[i]; // on récupère la valeur dans le tableau et on l'affiche dans l'input
     else // on affiche la barre
       document.getElementById('tete_' + i).value = '/'; // on modifie la valeur de l'input par une barre
    }
   }
Un peu de commentaires. :D

N.B : tu as fait une erreur de renommage dans la dernière partie de la fonction (queu), tu affectes la valeur de l'état en le traitant comme un tableau (alors que c'est tabQueu qui est attendu).

Re: problème avec onClick

Posté : 21 janv. 2012, 13:37
par Kapov
ha oui merci c'est corrigé, et j'ai compris le code.
Mais j'ai testé et ça n'a pas fonctionné :s

Re: problème avec onClick

Posté : 22 janv. 2012, 10:35
par xTG
Ah j'ai rien testé, juste codé ça sur le tas.
Quelles sont les erreurs JS ?

Re: problème avec onClick

Posté : 26 janv. 2012, 10:28
par Kapov
désolé du retard je capte souvent le net :s

donc juste en écrivant ma variable j'appuie sur le bouton mais rien ne ce produit :s
pas d’erreurs a proprement parler..