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" );
    }
  });
 
});