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