Comment modifier du CSS en javascript?

Comment modifier du CSS en javascript? - HTML/CSS - Programmation

Marsh Posté le 30-07-2013 à 09:00:13    

Bonjour à tous,
 
J'ai un petit souci car j'aimerais colorer une ligne sur 2 dans un tableau dynamique.
J'arrive à le faire sans problème avec le css suivant:

Code :
  1. table tr:nth-child(odd){
  2.   background-color:red;
  3. }


Mais ce qui me pose problème c'est que je filtre ce tableau avec un autocomplete. A chaque résultat, les <TR> ne répondant pas aux critères sont cachés (avec un hide), mais sans forcément garder une ligne sur 2 de colorées vu qu'elles sont colorées au chargement de la page.
J'aimerais donc trouver une solution lorsque je tape dans mon input de recherche en faisant un onkeyup... l'idée est de trouver une fonction pour reforcer la coloration.
 
Est-ce qu'il existe une solution?
 
Merci d'avance pour votre aide si précieuse!!!

Reply

Marsh Posté le 30-07-2013 à 09:00:13   

Reply

Marsh Posté le 30-07-2013 à 10:27:27    

Ce que tu peux faire, c'est une fois que tu lances ta recherche d'auto complete, lorsque tu caches tes tr, tu dois faire un mapping des tr visibles et modifier leur class/css.

Reply

Marsh Posté le 30-07-2013 à 19:32:41    

En CSS "pur" ce n'est pas possible. le nth-child ne s'appuie pas sur un selecteur (de type tr.visible:nth-child(odd)).
 
- Soit il y a solution par marquage "manuel" (cf sltpaulo) et on vire le nth-child du CSS
- Ou alors, lors du filtre, tu les places en derniers dans la liste (si tu ne veux pas/peux pas les supprimer et que l'ordre n'est pas "grave" ) genre $('#id_filtered_table tr.hidden').appendTo('#id_filtered_table') en jQuery
- Sinon tu peux aussi les "déplacer" dans un tableau "fictif" caché
 
Cordialement


Message édité par dreameddeath le 30-07-2013 à 19:33:00
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed