11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery : selectionner par le background-color

Bonjour

Soit une table de classe "planning" qui comporte des cellules dont certaines sont colorées en "orange" via un background-color="orange".

Comment selectionner ces seules cellules et leur donner un fond "vert".
je n'y parvient pas.

Pour vous moquer un peu coilà entre autres les aneries que je tente : Smiley biggrin 

 var td=$('table.planning td').css('background-color')=='orange';
       td.css({"background-color":'green'});


find ou filter seront peut-être necessaire mais je ne maitrise en rien cela Smiley confused
merci de votre aide
Administrateur
Bonjour,

jQuery permet de sélectionner dans le DOM ("dans le code HTML tel qu'il est interprété par les navigateurs" pour faire simple) des éléments, des classes, des id, selon des attributs et leur valeur, selon les parents et les frères précédents, selon leur "rang" (premier enfant, 1 sur 3 à partir du 2e, etc à peu près comme en CSS3.
On ne peut pas sélectionner selon la valeur d'une propriété CSS qu'aurait n'importe quel élément HTML... pas de façon simple ou générique sans aller vérifier pour chaque élément présélectionné.

Qu'est-ce qui donne cette couleur de fond orange ?
- une autre classe ? Sélectionne selon .planning et cette autre classe
- plusieurs autres classes possibles ? Sélectionne selon .planning avec pour condition supplémentaire d'avoir n'importe laquell de ces autres classes
- un attribut style avec pour valeur précise "background-color:orange" ? style est un attribut HTML, le reste sa valeur donc on peut sélectionner [style="background-color:orange"]. Mais attention les 3 chaînes suivantes sont différentes: "background-color:orange", "background-color: orange" et "background-color:orange;" (un espace ou un point-virgule ça suffit pour qu'il y ait une différence. On peut sélectionner ces différents cas mais à condition d'y penser, c'est pas automatique). De même si c'est "color: blue; background-color: orange; padding: 5px". Bon les styles en ligne c'est le mal à part quelques cas bien précis de toute façon...
- un script JS (disons jQuery plutôt) a ajouté cette couleur de fond avec la fonction .css() ? Je sais plus si on retombe sur le cas de l'attribut style ou s'il y a pas moyen de sélectionner cet élément...

Le cas générique, c'est qu'il faut, pour tous les éléments ayant une classe .planning, les passer en revue, extraire leur couleur de fond (avec la fonction .css() prenant un seul argument correspondant à la propriété background-color), comparer à orange, si c'est vrai modifier avec la fonction .css() (prenant maintenant 2 arguments la propriété et la valeur green)
Bonjour et merci pour cette reponse contructive.

mes celules ont en effet un style mis en ligne.
j'ai pu utiliser ta syntaxe :

$('table.planning td[style="background-color:'+actualcol+';"]').css({"background-color":newcol});


cela marche mais UNE seule fois car il semble que la fonction css(), ne sache retourner qu'une couleur exprimée en rgb. ce qui fait qu'au reclick sur une autre couleur de la mini palette ( dont les couleurs sont simplement exprimées de la facon suivante : orange, green, red .... ) , jquery ne retrouve pas une couleur en texte mais une couleur exprimée en rgb -> il ne trouve donc pas de correspondance dans les cellules de la table dont je veux modifie le fond de certaines.
A mon avis c'est pas vraiment ce que tu veux faire (sélectionner des éléments par leur couleur de fond)...

Admettons 2 styles de cellules du planning, l'une orange pour dire "pressé", l'autre rouge pour "urgent" :
.planing .hurry {background-color:orange;}
.planing .urgent {background-color:red;}

avec un markup qui doit ressembler à ça :
<table class="planning">
  <tr>
    <td class="hurry">cellule A</td>
    <td>cellule B</td>
    <td class="hurry">cellule C</td>
  </tr>
</table>

ce que tu veux c'est ni plus ni moins changer les cellules "hurry" en "urgent", soit :
$('.planing .hurry').removeClass('hurry').addClass('urgent');


Et voilà, là tu touches pas aux styles via javascript, mais seulement aux class="" Smiley cligne
bonne idée
j'adopte la méthode de passer par une classe. Smiley cligne
d'autant plus que j'avais opté pour un nom du background du genre " green " ou maroon ... et que jquery retourne les couleurs sous forme rgb -> dont ca marchait jamais

merci +++
Modifié par french-petzouille (02 Feb 2014 - 19:06)
Sujet clos
Aller à