Changement de class d'une ligne avec checkbox

[pacci]

Bonjour.

Pour ma PTI évènementiel que je dois présenter au BTS, j'ai choisi de présenter un programme répertoire codé en AJAX (XHTML/CSS).

Pour le moment le programme marche, mais je dois rajouter des interactions (conseil de mon prof d'info).

Je me suis dit que je vais mettre des checkbox devant mes lignes de contact et faire une suppression multiple.

Le système marche, mais dans l'optique de rajouter de l'intuitivité, lorsque je clique sur le checkbox, je veux changer la class de ma ligne.

j'ai testé :

Code PHP :

<?php ... if($i%2 == 0){$class='paire';}else{$class='impaire';}
       echo ' <tr class="'.$class.'" id="'.$value['id'].'">
	      <td><input type="checkbox" name="select[]" onclick="if(this.checked){document.getElementById(\''.$value['id'].'\').ClassName = \'ligne-hover\';}else{document.getElementById(\''.$value['id'].'\').ClassName = \''.$paire.'\'}"/></td> ... ?>

code CSS :

#content #tableau .paire{background:-moz-linear-gradient(top, #C9C9C9, #A0A0A0, #C9C9C9);text-align:center;font-size:14px;}
#content #tableau .ligne-hover{background:-moz-linear-gradient(top, #D14D4D, #770202, #D14D4D);text-align:center;color:#FFFFFF;font-size:14px;}

Ma ligne devrai se mettre en rouge lorsque je check ma checkbox, mais ce n'est pas le cas

Je suis preneur de toutes explications.

Merci d'avance.

[destroyedlolo]

Salut,

Je n'ai pas regarde en details ton code mais juste 2 remarques :

• Avant toutes chose, plutot que d'attaquer directement les objets en JS, je te conseillerai plutot d'utiliser un framework comme "prototype" qui te permet de t'affranchir des disparités entre navigateurs (surtout si tu dois rester compatible avec M$-IE).
  
• as-tu essaye de passer ta page dans un outils de debuggage comme l'excellentissime FireBug ? Ca te permet de voir assez rapidement ou ca cloche ...
  

Bye

[pacci]

Bonjour.

Merci de ta réponse.

J'utilise déjà prototype pour divers application "entreprise" et ce framework est génial, notamment pour l'ajax.

Cependant ce projet est scolaire je dois être apte à gérer les évènements de manière classique.

J'utilise Firebug (sous FF4), il ne me met aucune erreur.

Ayant fait 2 jours de recherche et ayant testé plusieurs solutions, ça ne fait toujours pas ce que je veux.

Je pense à une erreur dans la gestion du checkbox dans

onclick="if(this.checked)...

Je suis toujours preneur des solutions proposées.

Merci d'avance.

[destroyedlolo]

Heu, si je peux me permettre, ton code PHP est parfaitement illisible avec des chaines doublecote dans des chaines simple cote avec encore des simples cotes backslashees ... Bref, on s'y retrouve pas et je ne suis pas sur que JS et PHP s'y retrouve mieux au niveau des backslash justement.

J'aurai donc fait plutot

<tr class='<?= ($i%2) ? 'paire' : 'impaire' ?>' id='<?= $value['id'] ?>'>
<td><input type="checkbox" name="select[]" onclick="if(this.checked){ document.getElementById('<?= $value['id'] ?>').ClassName ...

Donc en clair, ajouter le dynamique dans ton code HTML static et non l'inverse ce qui sera rendra le code comprehensible ... et supprimera de facto le besoin de backslash.

Ensuite, ton code me semble assez illogique :

1. tu met la deco ligne paire/impaire dans le <tr>
   
2. mais tu te dépêches de l'ecraser a la ligne suivante dans le <td>
   

J'aurai change la deco des lignes dans les <tr> et ajouter ou non le "ligne-hover" suivant la valeur de la checkbox (mais, heu, c'est peut etre une API rajoutee par prototypes ou scriptaculos, je n'ai pas verifie ...).

Je n'ai pas code tout ca mais c'est la facon d'on je l'aurai implemente.

Enfin, je suis vraiment tres suspicieux sur le "onclick" sur la checkbox ... je pense que ca marcherai mieux avec un "onchange" et c'est peut etre pourquoi ton code ne marche pas.

Pis si tout ca ne fonctionne toujours pas, tente d'y mettre un breakpoint dans FireBug.

Bye

Lolo

[pacci]

Bonjour,

Merci de vos réponses

du coup j'ai ré-adapté mon code :

Code PHP:

$i = 1;
foreach ($result as $key => $value) {
  if($i%2==0){$class='paire';}else{$class='impaire';}?>
  <tr class="<?php echo $class;?>" id="<?php echo $value['id'];?>">
  <td><input type="checkbox" name="select[]" onchange="if(this.checked){document.getElementById('<?php echo $value['id'] ?>').ClassName = 'ligne-hover';}else{document.getElementById('<?php echo $value['id'];?>').ClassName = '<?php echo $class ;?>';}"/></td>
  <td><?php echo $value['id'];?></td>
  <td><?php echo $value['nom'];?></td>
  <td><?php echo $value['prenom'];?></td>
  <td><?php echo $value['tel'];?></td>
  <td><?php echo $value['mail'];?></td>
  <td><?php echo $value['portable'];?></td>
  <td><?php echo $value['entreprise'];?></td>
  <td><?php echo $value['nom_type'];?></td>
  <td>
     <span onmouseover="document.edit<?php echo $value['id'];?>.src='icone/edit-hover.png'"  onmouseout="document.edit<?php echo $value['id'];?>.src='icone/edit.png'">
       <img class="icone" src="icone/edit.png" name="edit<?php echo $value['id'];?>" onclick="modifier('<?php echo $value['id'];?>')"/>
     </span>
  </td>
  <td>
     <span onmouseover="document.delete<?php echo $value['id'];?>.src='icone/delete-hover.png'"  onmouseout="document.delete.<?php echo $value['id'];?>.src='icone/delete.png'">
       <img class="icone" src="icone/delete.png" name="delete<?php echo $value['id'];?>" 
              onclick="if(window.confirm('Etes-vous sûr de vouloir supprimer le contact <?php echo $value['nom'];?> <?php echo $value['prenom'];?> ?'))
              {supprimer_contact('<?php echo $value['id'];?>');}else{return false;}"/>
     </span>
  </td>
 </tr>
<?php $i++;
}
echo '</table></form>';

Donc en clair, ajouter le dynamique dans ton code HTML static et non l'inverse ce qui sera rendra le code comprehensible ... et supprimera de facto le besoin de backslash.

Je n'avais pas erreurs au niveau de l'interprétation donc je pense qu'ils s'y sont retrouvés .

Ensuite, ton code me semble assez illogique :

tu met la deco ligne paire/impaire dans le <tr>

mais tu te dépêches de l'ecraser a la ligne suivante dans le

Par ce qu'une image vaut mieux qu'un grand discours....

La ligne se mets en rouge sur le hover.

Maintenant je veux qu'il se mette en rouge sur le click de chekbox.

J'ai essayé avec onChange, ça marche toujours pas.

J'utilise déjà prototype pour divers application "entreprise" et ce framework est génial, notamment pour l'ajax.

Cependant ce projet est scolaire je dois être apte à gérer les évènements de manière classique.

J'aurai change la deco des lignes dans les <tr> et ajouter ou non le "ligne-hover" suivant la valeur de la checkbox (mais, heu, c'est peut etre une API rajoutee par prototypes ou scriptaculos, je n'ai pas verifie ...).

Il y a une API Prototype pour le faire mais je n'ai pas le droit de l'utiliser c'est un projet scolaire !

Pis si tout ca ne fonctionne toujours pas, tente d'y mettre un breakpoint dans FireBug.

Firebug ne détecte aucune erreur.

Je pense à une erreur de logique mais je n'arrive pas à voir où c'est.

Merci de votre aide et des futures réponses.

Cordialement.

[Neroth]

Utilise ça plutôt

document.getElementById("<?= $value['id'] ?>").className = [...]

Et non

document.getElementById("<?= $value['id'] ?>").ClassName = [...]

.

[pacci]

Merci Neroth le problème venait de là.

Utilise ça plutôt

document.getElementById("<?= $value['id'] ?>").className = [...]

Et non

document.getElementById("<?= $value['id'] ?>").ClassName = [...]

C'est dans ces moments là qu'on se sent c*n !

J'ai galéré pendant plus de trois semaines pour un problème de majuscule.

Edit : Sujet résolu merci à tous pour vos réponses.

[Neroth]

Cela m'est arrivé tant de fois! à force on comprend la logique et on l'adapte même à ses functions . Si tu veux une astuce : dis toi que tout est en minuscule et que tu n'as pas le droit d'utiliser les espaces, tu mets donc un _ ça te donne par exemple get_elements_by_tag_name, sauf que c'est pas très jolie! Alors toutes les lettres qui on un _ derrière eux l'enlèvent et deviennent majuscule : getElementsByTagName. Mais attention cela ne s'applique pas au objet "primaire" : String, Math, RegExp ... Ni aux "secondaire" : document, window, console. Par contre ça marche pour la convertion css js : margin-left => marginLeft en js (y'a juste un - à la place du _ d'avant).

Voila! Bonne chance!

[pacci]

Merci Neroth pour ton conseil qui est de taille !

N'étant pas familier avec la syntaxe Javascript ton post vas m'éviter pas mal de bugg !

Dans la continuité du post j'ai un nouveau problème lié à la gestion des checkbox (fait ch*er ces checkbox !)

j'ai le code suivant en entête de tableau :

<tr id="entete">
    <th><input type="checkbox" onclick="checkAll(this)"></th>
    <th>Id</th>
    <th>Nom</th>
	...		
</tr>

Qui se traduit par cette image :

J'aimerai avoir :

J'ai trouvé sur internet une fonction permettant le checkbox maître :

function checkAll(master){
 var checked = master.checked;
 var col = document.getElementsByTagName("input");
 for (var i=0;i<col.length;i++) {
   col[i].checked = checked;
 }
}

La fonction marche bien et me check toutes mes lignes.

Code d'une ligne :

<td>
  <input type="checkbox" id="select<?php echo $i; ?>" 
  onchange="if(this.checked){document.getElementById(<?php echo $i; ?>).className='ligne-hover';}else{document.getElementById('<?php echo $i;?>').className = '<?php echo $class ;?>';}"/></td>					

J'ai pensé logiquement que la ligne: col.checked = checked; dans la fonction change l'état de la checkbox donc que le changement de class se fait naturelement.

Mais il en est autrement...

J'ai essayé : col.className = "ligne-hover"; dans ma boucle mais ça fait rien de plus.

Si quelqu'un a une idée je suis preneur :

 var idée : booléen
 Si (idée) alors
   afficher("youpi")
 Sinon
   tant que (!idée) alors
     on réfléchie ...
     afficher("morbleu de saperlipopette")
   fin tant que
 Fin Si

Les gars faut m'aider j'en ai marre que mon cerveau m'affiche "morbleu de saperlipopette".

Merci d'avance.

Modifié 30 Mai 2011 par pacci

[Neroth]

Voilà ce qui va se passer :

-Au changement d'état par l'utilisateur de la checkbox qui change l'état de toute les autres (onchange), tu lances une fonction qui check Toutes les checkbox de la page.

-Plus rien.

Pourquoi ? Car le onchange ne s'active que par l'utilisateur ! Si c'est un programme qui check la checkbox, tu n'activeras pas le onchange de toute tes box !

C'est pourquoi on va appeller la fonction onchange depuis checkAll() !

var checkAll = function()
{
var checked = arguments[0].checked;
var col = document.getElementsByTagName("input");
	for(var i=0;i<col.length;i++)
	{
		if(col[i].parentNode.nodeName == "TD") // C'est pour éviter d'inclure la ligne du checkbox maitre 
		{
		col[i].checked = checked;
		col[i].onchange();
		}
	}

};

Et pour optimiser un peu ton code utilise se onchange :

onchange="if(this.checked){this.parentNode.parentNode.className = 'ligne-hover';}else{this.parentNode.parentNode.className = '<?php echo $class; ?>'}"

Maintenant, on pourrai faire bien mieux ! Mais comme c'est dans le cadre d'études tu dois le faire par toi même je pense ?! Sinon je serai ravi de t'aider à perfectionner tout ça .

Ci cela t'interesse, contact moi par MP !

[pacci]

Je fais un récap'

Pour changer la class de la ligne :

<td><input type="checkbox" id="select<?php echo $i; ?>" onchange="if(this.checked){this.parentNode.parentNode.className='ligne-hover';}else{this.parentNode.parentNode.className = 'class-courante';}"/></td>				

Pour avoir la checkbox maître qui permet de le check des autres checkbox :

var checkAll = function() // Fonction de Callback
{
var checked = arguments[0].checked; // Pour récupérer les paramètres de fonction de manière dynamique
var col = document.getElementsByTagName("input"); // Tableau (ou collection) qui récupère les checkbox et les renseigne dans "col"
   for(var i=0;i<col.length;i++) // Pour i=0 à nombre_d_elements_récupérés pas 1 faire ...
   {
     if(col[i].parentNode.nodeName == "TD") // Si l'élément parent est une cellule td (et non th) ...  
     {
       col[i].checked = checked; // On check toutes les checkbox
       col[i].onchange(); // On change toutes les checkbox en associant la méthode "onchange" à notre tableau
     }
   }
};

Utilisation :

<th><input type="checkbox" onclick="checkAll(this)"></th> <!-- Checkbox maître -->

Tout fonctionne chez moi, merci à tous et en particulier à Neroth !

Sujet résolut une fois pour toute.