Aller au contenu

Changement de class d'une ligne avec checkbox


pacci

Sujets conseillés

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.

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

  • 3 semaines plus tard...

Heu, si je peux me permettre, ton code PHP est parfaitement illisible :whistling: 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

Lien vers le commentaire
Partager sur d’autres sites

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

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

1121025389.jpg

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.

Lien vers le commentaire
Partager sur d’autres sites

Utilise ça plutôt ;)

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

Et non

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

.

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

Cela m'est arrivé tant de fois! :P à 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! :)

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

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 :

1121451546.jpg

J'aimerai avoir :

1121452406.jpg

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é par pacci
Lien vers le commentaire
Partager sur d’autres sites

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 ;) !

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...