Discussion :

[Xunil]

Bonjour,

N'�tant pas tr�s fut� en javascript, je rencontre un probl�me pour r�initialiser une classe css � sa valeur de d�part.

Je g�n�re un tableau dynamiquement avec php, avec alternance de couleur sur les lignes, ceci via une class css.

Chaque ligne contient 2 checkbox , qui lorsque l'une d'elle est coch�e, d�coche l'autre et colore ma ligne d'un couleur suivant l'�l�ment coch�.

Comment faire pour r�cup�rer la valeur de base de la classe css de base ?

Car si je modifie une 1�re fois la classe, c'est ok, mais quand je la modifie une seconde fois, elle contient ce qui a �t� d�j� ajout�.

Exemple:
Ma class de base contient ligne1 ou ligne2

Je cliques sur la 1�re checkbox d'une ligne1, la classe est ajout�e, j'obtiens:
ligne1 vert

Mais ensuite, je coche la 2nde checkbox, l� probl�me, puisque j'obtiens :
ligne1 vert rouge

Comment r�cup�rer la valeur de la classe de base, sans modif par le js ?

Merci.

[Auteur]

Une remarque :

Chaque ligne contient 2 checkbox , qui lorsque l'une d'elle est coch�e, d�coche l'autre et colore ma ligne d'un couleur suivant l'�l�ment coch�.

Tu peux utiliser les boutons radio..

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
<input type="radio" id="idRadio1" name="radio1" checked="checked">
<input type="radio" id="idRadio2" name="radio1">
 
 
<input type="radio" id="idRadio3" name="radio2" checked="checked">
<input type="radio" id="idRadio4" name="radio2">
<input type="radio" id="idRadio5" name="radio2">

Donne leur le m�me nom pour cr�er des groupes.

Exemple:
Ma class de base contient ligne1 ou ligne2

Je cliques sur la 1�re checkbox d'une ligne1, la classe est ajout�e, j'obtiens:
ligne1 vert

Mais ensuite, je coche la 2nde checkbox, l� probl�me, puisque j'obtiens :
ligne1 vert rouge

Comment r�cup�rer la valeur de la classe de base, sans modif par le js ?

Peux-tu faire quelque chose de semblable :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
var element = document.getElementById("id_td");
var chk1 = document.getElementById("id_checkbox1");
var chk2 = document.getElementById("id_checkbox2");
 
Si (chk1.checked)
    element.className = "ligne1 vert";
 
Si (chk2.checked)
    element.className = "ligne1 rouge";

[Xunil]

Oui, j'avais pens� au bouton radio, mais le probl�me avec eux, c'est que l'on ne peut pas les d�cocher, du moins sans en passer par du javascript.

Pour ta 2nde solution, non, je ne peux pas le faire, puisque je ne sais pas par avance ce que contient la class de l'�l�ment tr.

J'ai trouv� � l'instant une solution en utilisant substring, �a m'oblige un donner des noms de classes de m�me longueur, mais �a � l'air de fonctionner

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
function selectLigne(boxId, box2Id, trId, class)
{
    var tr = document.getElementById(trId);
    var box = document.getElementById(boxId);
    var box2 = document.getElementById(box2Id);
    if( box.checked )
    {
      box2.checked = false;
      tr.className = tr.className.substring(0, 12) + " " + class;
    }
    else
      tr.className = tr.className.substring(0, 12);
}

Merci de ta r�ponse

[Auteur]

si tu veux conna�tre les classes appliqu�es sur ton objet, avec une expression r�guli�re :

Exemple

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
 
function test()
{
 var classes = "classe1 uneAutreClasse classe2 classe3";
 
 var tab = new Array();
 var exp = /(\w*[^\s])/gi;
 
 tab = classes.match(exp);
 alert(tab);
}

tab te donne la liste des classes et tab.length, le nombre de classes.

avec ton code :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
var tr = document.getElementById(trId);
var classes;
var tab = new Array();
var exp = /(\w*[^\s])/gi;
 
classes = tr.classeName;
tab = classes.match(exp);

Ensuite parcours le tableau tab et garde ce qui t'int�resse
Un exemple :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
tr.classeName = tab[0]+" "+tab[2]; //ne pas oublier l'espace !

[Xunil]

Ah oui, c'est encore mieux !

J'avais pas pens� aux expressions r�guli�res, vu que je connais pas du tout la syntaxe en js.

Cette solution me permet de pouvoir changer mes noms de classes css sans toucher au javascript.

Merci Auteur