Change la couleur de fond des cellules d'un tableau en fonction de leur en-tête
Je suis dynamiquement la construction d'un calendrier(tableau html) en javascript. Je veux avoir le samedi et le dimanche colonnes avec un gris couleur d'arrière-plan.
Quand je suis en ajoutant les autres cellules pour le calendrier, je veux vérifier pour les cellules d'en-tête de colonne, vérifier l'intérieur du texte html/class/id et la couleur de la cellule, si c'est sur un week-end.
C'est là que j'ai ajouter les en-têtes de colonne avec le départ de lettres des jours :
<th bgcolor='#c1c1c1' width=20>S</th>"
<th width=20>M</th>"
<th width=20>T</th>"
<th width=20>W</th>"
<th width=20>T</th>"
<th width=20>F</th>"
<th bgcolor='#c1c1c1' width=20>S</th>"
J'ai essayé ce code mais il ne fonctionne pas correctement...
var table = document.getElementById("calendarTable");
var rows = table.getElementsByTagName("tr");
for (var z = 0; z < rows.length-1; z++) {
for (var y = 0; y < rows[z].cells.length; y++) {
if(rows[z].cells[y].headers=="S")
rows[z].cells[y].style.backgroundColor = "#c1c1c1";
}
}
Donc ce que je souhaite réaliser est juste un petit extrait de code, qui passe par un ensemble table élément, et vérifie toutes les cellules d'en-tête pour la innerhtml contenu ou de l'identifiant et ça change la couleur d'arrière-plan en conséquence.
Plus Tard Edit :
Capture d'écran de la table :
Le truc, c'est que le tableau est construit selon le mois où nous sommes actuellement, et nous n'avons pas nécessairement connaître l'indice de samedi ou dimanche. (dans la photo, le 1er décembre terres lundi, donc c'est un assez chanceux situation)
Le samedi et le dimanche ne sont pas fixes dans le tableau. Le calendrier commence avec le 1er du mois en cours et puis arrive le jour pour elle. Je sais que c'est un peu bizarre, mais c'est la façon dont il a été conçu par quelqu'un d'autre, et j'ai de travailler avec elle.
Les barres bleues sont en train de marquer un intervalle de temps, mais que la chose est déjà au travail.
Le code où je suis de la construction de l'ensemble de la table serait vraiment long pour le rendre compréhensible.
- pourriez-vous s'il vous plaît ajouter du code pour lequel vous créez la table. Me semble que l'attribution d'une classe à créer peut-être plus simple qu'en parcourant tous les élément et de le faire après la population de table.
- pouvez-vous d'inclure le rendu html de la table, il semble que si vous avez deux lignes avant votre jour d'en-tête des coups de pied dans
- Oui, la première ligne correspond à l'Année (2014) la deuxième ligne est le Mois de décembre (avec un rowspan 2), la troisième ligne contient les dates(qui commence toujours par 1, évidemment) et la quatrième est le jour de l'en-tête.
- J'ai mis à jour ma réponse
Vous devez vous connecter pour publier un commentaire.
essayez ceci:
Exemple
Note de votre boucle terminais une ligne de début et devrait commencer à partir de 1 (0 sera votre ligne d'en-tête)
Mise à JOUR
Donné votre edit, j'ai fait la maquette, une table similaire et penser à la suite de js devrait résoudre votre problème:
J'ai ajouté des commentaires à la violon exemple
Ce code est un peu mieux sur la performance que vous n'avez pas besoin de faire une boucle par autant de cellules:
Exemple
Je certainement ne serait pas vous encourageons à utiliser le JavaScript pour le style. Au lieu de cela, utilisez autant de CSS que vous pouvez éventuellement garder de haute performance et script-dépendance faible.
Je vais supposer que votre structure de la table ressemble à la suivante. J'ai essayé de mon mieux pour recréer à partir de votre capture d'écran:
Ensuite, nous allons utiliser une série de composés sélecteurs pris en charge dans IE 9 et jusqu'. Remarque l'énergie primaire est l'utilisation de
:nth-of-type
, avec qui nous permettent de cibler les Sam/dim colonnes, peu importe où ils tombent sur le calendrier lui-même:Les résultats correspondent à votre sortie désirée:
Violon: http://jsfiddle.net/80fajvd6/4/
<col>
élément (et<colgroup>
) ont été à la fois obsolète en HTML (4.1)/obsolète (HTML 5).Avec Jquery :