[Javascript]Mise en valeur d'un tr avec checkbox

Voila, j'ai un tableau comprenant différentes données, pour chaque ligne j'ai un checkbox puis les données, le checkbox representant la ligen de donnees lol..
J'aimerai que lorsque une box est checké, la couleur du tr soit automatiquement changé pour refléter le changement.

L'utilisation de Javascript me semble inévitable

j'ai cherché un peu partout mais on ne parle de ce genre d'actions qu'avec des mouseover....

j'imaginais eventuellement une fonction qui passe le numero de la ligne du checkbox, je peux recuperer le tr via un getelementbyname suivi de l'indice sur mon objet, mais c'est apres pour affecter la couleur (le style css) que je suis largué...


Si quelqu'un a une idée ou un bout de code à me faire partager ;)

Merci d'avance

regarde du côté de onClick pour ton problème, ensuite, pour la couleur de fond du tr, tu peux toujours utiliser .style.backgroundColor ;)

J'ai codé ca :

Code:

---

1 2 3 4 5

var tableau = document.getElementByName('table'); var ligne = tableau[1].getElementByName('tr');   tr[CatIDStr].style.setCLass = "select";

---

ca peche déjà sur le getElementByName que firefox ne connait pas....

Sinon c'est plausible le tr[CatIDStr].style.setCLass = "select"; pour changer la classe d'un tr ?

J'ai une erreur : tableau has no properties.... ca veut dire qu'il n'arrive pas à récupérer d'elements table ?

mon dernier code :

Code:

---

1 2 3 4 5 6 7 8

var tableau = new Array(); var ligne = new Array(); tableau = document.getElementsByName('table')[1];   ligne = tableau.getElementsByName('tr');   ligne[CatIDStr].className = "select";

---

Thk

getElementsByName (tout comme getElementById) ne peut s'utiliser que sur document, seul getElementsByTagName peut s'utiliser sur tous les noeuds

J'en suis la :

document.getElementsById('TD_'+CatIDStr).className = "select";

firefox me marque que la fonction document.getElementsById n'est pas une fonction.....



EDIT : Avec le getElementByTagName ne pose pas de probleme, mais par contre l'effet de changement de classe via className ne fait rien :/

document.getElementsByTagName('TD_'+CatIDStr).className = "select";

bon avec getElementByID ca marche quand je le clique, par contre quand cest la fonction de selection globale (qui check/decheck mes cases), ca plante sur la premiere :/

alors, une faute que je fais aussi assez souvent :

getElementsByName
getElementsByTagName

mais

getElementById


les deux premières renvoient un tableau
;)

Fonction pour tout checker

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function checkAll(elem, valeur) { //len = form.elements.length; //alert(document.form.liste.length); for( var i=0 ; i < document.forms["form"].elements[elem].length ; i++) { document.forms["form"].elements[elem][i].checked = valeur;   var nb = i;   //alert (nb); TDColor(document.forms["form"].elements[elem][i], nb, 0); //fnChange(nb,0); } }

---

//Fonction pour changer la classe

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function TDColor(case, CatIDStr, nb) {   //document.getElementsByTagName('TD_'+CatIDStr).className = "select"; alert(case.checked);   if(case.checked == true) document.getElementById('TD_'+CatIDStr).className = "select";   else document.getElementById('TD_'+CatIDStr).className = "unselect"; }

---

Code HTML/PHP

Code:

---

1 2 3 4 5

echo "<TD ID='codeorg_$i' class='left' >"; echo "<input ID='CK_$i' onclick='TDColor(this, $i, $nb); fnChange($i,$nb);' type=checkbox name='liste'"; ... <input type=checkbox name=check_all value=all OnClick=\"checkAll('liste', this.checked);\">

---

Ca marche pas encore super, les classes changeant au hasard :/
Et impossoble de revenir à l'ancien état.

De pire en pire, now firefox m'annonce que mes fonctions ne sont pas definies...

ca devient galere a suivre ce bordel :/

Bon les fonction refonctionnent,e ne me reste qu'un souci

dans TDColor :

alert(document.forms["form"].elements["liste"][CatIDStr].checked);

me renvoie toujours false, meme quand la zone est cochée.... Le CatIDStr est bien passé en parametre... mais au final la fonction recupere tjs false....

Code:

---

1 2 3 4 5

alert(CatIDStr + ' ' + document.forms["form"].elements["liste"][CatIDStr].checked);   if(document.forms["form"].elements["liste"][CatIDStr].checked == true) document.getElementById('TD_'+CatIDStr).className = "select";

---

EDIT : en fait le false si je clique sur une box

Si je clique sur la box qui permet de les cocher toutes, il maffiche le premier a true puis sarrete, si je reclicke, la par contre il me dit qu'elles sont toutes à false....
Pourquoi la boucle marche dans un seul sens ?

Apres test, il apparaitrait que ce serait le getElementbyID qui provoquerait la coupure...

Firefox : Erreur : document.getElementById("TD_" + CatIDStr) has no properties

EN changeant un peu la fonction TDColor :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function TDColor(CatIDStr) { var TObj = document.getElementById("TD_" + CatIDStr); if (TObj.className == "select") { TObj.className = "unselect"; } else { TObj.className = "select"; } }

---

je gere correctement la couleur au cas par cas, mais la selection globale bloque apres le coche du premier element, cest le seul osuci qui me bloque encore :/

Firefox : Erreur : TObj has no properties

C'est bon ca roule, le probleme du no property venbait dune mauvaise incrementation (dans jscript i demarre a zero, et dans php i demarre a 0 suivi de i++; Parfois la maintenance....)