Discussion :

[ludojojo]

Bonjour,

Je souahiterais afficher un tableau qui aurrait une ligne blanche et une ligne bleu le tout répété "n" fois...

J'ai bien compris que le système à utiliser est de déclarer deux class avec des propriétés spécifiques... Cela ne pose pas de problème.
En revanche je souhaiterais savoir s'il est possible de faire cela de façon automatique? Le but est de ne pas avoir à écrire à chaque fois class="..." pour chaque ligne!

Je tiens à préciser qu'il n'y à pas d'appel à une base de données possible, donc pas de script php ou asp, en revanche JS possible...

Merci par avance pour votre aide.

[Loceka]

Tu peux récupérer toutes les lignes de ton tableau et mettre une classe différente selon l'indice :

Code :

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

1
2
3
4
5
6
7
8
9
var table = document.getElementById("ta_table");
var lignes = table.getElementsByTagName("TR");
for (var i = 0; i < lignes.length; i++) {
  if (i % 2 == 0) {
    lignes[i].setAttribute("class", "classe1");
  } else {
    lignes[i].setAttribute("class", "classe2");
  }
}

Il faut tout de même savoir que IE (en tout cas IE 6) ne gère pas le changement de classe dynamique. Auquel cas tu peux directement changer le style :

Code :

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

lignes[i].style.backgroundColor = "blue";

[Bovino]

Il faut tout de même savoir que IE (en tout cas IE 6) ne gère pas le changement de classe dynamique.

Ben si...

Code :

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

1
2
3
4
5
  if (i % 2 == 0) {
    lignes[i].className = "classe1";
  } else {
    lignes[i].className = classe2";
  }

[SpaceFrog]

Code :

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

1
2
3
4
5
var table = document.getElementById("ta_table");
var lignes = table.getElementsByTagName("TR");
for (var i = 0; i < lignes.length; i++) {
    lignes[i].className= (i % 2 == 0)? "classe1":"classe2";
}

[NoSmoking]

j'aime bien

Code :

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

1
2
3
4
5
var table = document.getElementById("ta_table");
var lignes = table.getElementsByTagName("TR");
for( var k = i = 0; i < lignes.length; i++) {
  lignes[i].className = "class" +(k = 1-k);
}

[Loceka]

Il faut tout de même savoir que IE (en tout cas IE 6) ne gère pas le changement de classe dynamique.

Ben si...

Ah
Il me semblait pourtant que quand je m'étais essayé aux menus déroulants y'a quelques années, l'astuce du changement de classe en JS ne fonctionnait pas sous IE. Mais c'est probablement ma mémoire qui déconne, va falloir que je pense à en changer.

[berlo44]

J'ai ce code qui n'utilise pas les classes, il doit être placé à la fin du fichier html.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arrayLignes = document.getElementById("tableau").rows;
var longueur = arrayLignes.length;
var i=0;
 
while(i<longueur)
{
	if(i % 2 === 0)
	{
		arrayLignes[i].style.backgroundColor = "#bdcbf5";
	}
	else //elle est impaire
	{
		arrayLignes[i].style.backgroundColor = "#829eeb";
	}
	i++;}

[ludojojo]

Merci à tous pour votre aide !
En effet tous ces codes fonctionnent parfaitement!