Agenda

Jquery selecteur nth-child

by Raphael KUHN

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td><p>Horaires</p><p>/Jours</p></td><td>Lundi</td><td>Mardi</td><td>Mercredi</td><td>Jeudi</td><td>Vendredi</td><td>Samedi</td><td>Dimanche</td></tr><tr><td> 8h00 - 9h00</td><td rowspan="3">Plateau<br />musculation</td><td rowspan="3">Plateau<br />musculation</td><td rowspan="3">Plateau<br />musculation</td><td rowspan="3">Plateau<br />musculation</td><td rowspan="7"> Plateau<br />musculation</td><td rowspan="3">Plateau<br />musculation</td><td rowspan="3">Plateau<br />musculation</td></tr><tr><td> 9h00 - 9h30</td></tr><tr><td> 9h30 - 10h00</td></tr><tr><td> 10h00 -10h30</td><td>ABDO (Anthony)</td><td>ABDO (Robin)</td><td>ABDO (Typhaine)</td><td>ABDO (Vladimir)</td><td>ABDO (Olivier)</td><td>ABDO (Olivier)</td></tr><tr><td> 10h30 - 11h00</td><td rowspan="18">Plateau<br />musculation</td><td rowspan="18">Plateau<br />musculation</td><td rowspan="21">Plateau<br />musculation</td><td rowspan="7">Plateau<br />musculation</td><td>Plateau<br />musculation</td><td>Plateau<br />musculation</td></tr><tr><td> 11h00 -  11h30</td><td>CROSS FIT (Olivier)</td><td>CROSS FIT ( Olivier)</td></tr><tr><td> 11h30 - 12h00</td><td rowspan="9">Plateau<br />musculation</td><td>Plateau<br />musculation</td></tr><tr><td> 12h00 - 12h30</td><td>ABDO (Anthony)</td><td rowspan="2"> Fermeture 12h00 - rangement des équipements 5 min avant la fermeture</td></tr><tr><td> 12h30 - 13h00</td><td> </td></tr><tr><td> 13h00 - 13h30</td><td> </td><td> </td></tr><tr><td> 13h30 - 14h00</td><td> </td><td> </td></tr><tr><td> 14h00 - 14h30</td><td> ABDO (Robin)</td><td> </td><td> </td></tr><tr><td> 14h30 - 15h00</td><td rowspan="10">Plateau<br />musculation</td><td> </td><td> </td></tr><tr><td> 15h00 - 15h30</td><td> </td><td> </td></tr><tr><td> 15h30 - 16h00</td><td>Plateau<br />musculation</td><td> </td></tr><tr><td> 16h00 -...

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
  background: white;
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  height: 100%;
}
.overscroll{overflow:scroll;}

.wtrContainer {
    padding: 5px 15px 5px 15px !important;
}
table {
  width: 100%;
  height:auto;
  display:table;
  border-width: 0px !important;
  border-collapse: collapse;
  background: white;
  border-radius: 3px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
  max-height: 600px !important;
  line-height:1.2;
}

tr {
  overflow: hidden;
  
}

td {
  width: 12.5%;
  height:98px;
  padding: 0 5px 0 5px !important;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  position: relative;
}
table td div{
    display:flex !important;
    align-items:center;
    justify-content:center;
    text-align:center;
}

td:first-child {
  border-left-width: 0px !important;
}

td:last-child {
  border-right-width: 0px !important;
}


.legende {
  background: #F5F5F5;
  border: 0 !important;
  padding: 20px 10px !important;
  height:auto !important;
}

.legendegauche,
.horairejournee,
.horairefermeture {
  color: #999999 !important;
}

.horairejournee {
  vertical-align: middle;
  height: 98px !important;
  overflow: hidden;
  font-size: 16px !important;
  width: 190px !important;
}

.horairefermeture {
  vertical-align: middle;
  height: 35px;
  font-size: 12px;
}

.seancestyle {
  background: #6BD433;
  padding: 10px ;
  margin: 2px 0;
  color: #ffffff;
  /*border-radius: 3px;*/
  position: relative;
}

.seancestyle_imbrique {
  background: #0084FF;
  height:90%;
  /*margin: 6px 5px 0 5px;*/
  padding: 10px 10px 10px 10px;
  color: #ffffff !important;
  border-radius: 3px;
  min-width: 144px;
}

.seancestyle_imbrique-2 {
  background: ORANGE;
  height:90%;
  /*margin: 6px 5px 0 5px;*/
  padding: 10px 10px 10px 10px;
  color: #FFF !important;
  border-radius: 3px;
  min-width: 144px;
}

.seancestyle_imbrique-3 {
  background: pink;
  margin: 6px 5px 0 5px;
  padding:...

JavaScript

var tab = jQuery.noConflict();
tab(document).ready(function(){
	// Ajout d'une balise div à l'extérieur de chaque td du tableau
		tab("td").wrapInner("<div></div>");
// Récupération des styles css pour une génération automatique dans le tableau
		// Style 1ere ligne jours
		tab("tr:nth-child(1) td").addClass('legende');
		// Style 1ere colone horaires
		tab("tr td:nth-child(1)").not(":first").addClass('horairejournee');
		// Style specific couleur de texte horaires
		tab("td:first-child").addClass('legendegauche');
		// Style plateau musculation par defaut toutes les demi heures
		tab("tr:nth-child(n+2) td:nth-child(n+2)").addClass('seancestyle');
		// Style seance abdo (respecter les majuscule ou minuscule)
		tab("td div:contains('ABDO')").addClass("seancestyle_imbrique");
		// Style seance cross fit (respecter les majuscule ou minuscule)
		tab("td div:contains('CROSS')").addClass("seancestyle_imbrique-2");
		// Style fermeture du centre musculaffitte
				// Fermeture 21h30 en semaine
				tab("tr:last-child td:nth-child(n+2):nth-child(-n+4)").addClass("fermee");
				// Fermeture 19h00 le samedi
				tab("tr:nth-child(n+23) td:nth-child(6)").addClass("fermee");
				// Fermeture 12h00 le dimanche
				tab("tr:nth-child(n+9) td:last-child").addClass("fermee");
        });