Discussion :

[69Pierre]

Bonjour.
Je souhaiterai savoir comment faire une boucle pour attribuer de nouveaux style à des balises td contenues dans un tableau. Pour l'instant j'ai une classe identique aux 3 balises td concernées.
Je souhaiterai faire une boucle pour qu'une balise td contenant et les 2 balises td suivantes aient le même style et que le navigateur ne parcoure pas tout le reste du document à la recherche d'une classe "class"/

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<table>
....</td>
<td class="class">champs 1</td>
<td class="class">champs 2</td>
<td class="class">champs 3</td>
<td>...
</table>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
for (var i = 0; i<3; i++) {
...
$('.class>i').css({
border: 3px blue groove;
}
...
}

Et aprés, je ne sais pas.
Merci de votre aide.

[danielhagnoul]

Je souhaiterai faire une boucle pour qu'une balise td contenant et les 2 balises td suivantes aient le même style et que le navigateur ne parcoure pas tout le reste du document à la recherche d'une classe "class"/

Je ne comprends pas la question.

[69Pierre]

Bonjour.
Je souhaiterai attribuer les mêmes styles css à 3 balises <td></td> consécutives contenues dans un tableau.

[danielhagnoul]

Cela j'avais compris, mais comment est déterminé le point de départ. On commence au premier TD ou au sixième ?

class="class" Jamais ! Il y a assez d'autres mots dans la langue de Molière.

[69Pierre]

J'ai mis l'existant pour le html, je vais mettre une ébauche de la cible :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<table>
....</td>
<td id="temps">champs 1</td>
<td>champs 2</td>
<td>champs 3</td>
<td>...
</table>

[danielhagnoul]

La véritable structure de la TABLE ?

Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<table>
  <thead>
    <th>Un</th>
    <th>Deux</th>
  </thead>
  <tbody>
    <tr>
      <td class="moliere">
        10
      </td>
      <td class="moliere">
        11
      </td>
    </tr>
    <tr>
      <td class="moliere">
        20
      </td>
      <td class="moliere">
        21
      </td>
    </tr>
    <tr>
      <td class="moliere">
        30
      </td>
      <td class="moliere">
        31
      </td>
    </tr>
    <tr>
      <td class="moliere">
        40
      </td>
      <td class="moliere">
        41
      </td>
    </tr>
  </tbody>
</table>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$( function(){ // forme abrégée de $(document).ready( function( ){
 
  var
    jObjMoliere = $( ".moliere" ),
    jObjMoliereLength = jObjMoliere.length;
 
  jObjMoliere.on( "click", function( e ){
    var n = jObjMoliere.index( e.target );
 
    jObjMoliere.css( "background-color", "white" );
 
    for ( var i = n, k = 0; i < jObjMoliereLength, k < 3; k++, i++ ){
      jObjMoliere.eq( i ).css( "background-color", "yellow" );
    }
  });
 
});

[69Pierre]

Merci, en fait je cherchais quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
				index=$("#tps1").index("th");
 
				nombreColonnes = $("th").length;
 
				for ( var i = 0; i < 3; i++ ){
					indexBis = index + i;
					$('th:eq('+indexBis+')').css( "background-color", "yellow" );
					console.log(indexBis);	
				}

Avec en plus ce code pour les td.
En remplaçant dans cette boucle dans la boucle FOR qui gère les th par des td et en l'incluant dans une boucle FOR qui gère les lignes (tr)