Alterner la couleur des ligne dans un tableau html

Version imprimable

28/01/2008, 12h59
arnaudperfect

Alterner la couleur des ligne dans un tableau html

Bonjour,

J'ai un tableau en html avec des données, et j'aimerai savoir si c'est possible avec du javascript de faire une alternation de couleur suivant la ligne ? J'ai réussi à le faire avec du php.

exemple :

http://imagik.fr/uploads/9806

Merci d'avance.
28/01/2008, 13h20
SpaceFrog

deux class unpour chaque couleur;

une boucle en pas de deux pour attribuer les classNames ...

bonjour,

les feuilles de styles (CSS) répondront à ton problème :

Code:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
table{
 border-collapse: collapse;
 border: 3px solid #222222;
 text-align: center;
}
 
td{
 border: 1px solid #222222;
 padding: 5px;
 width: 100px;
}
 
.Titre{
 background-color : #555599;
 color: #FFFFFF;
}
 
.lignePaire{
 background-color : #555555;
 color: #FFFFFF;
}
 
.ligneImpaire{
 background-color : #AAAAAA;
 color: #FFFFFF;
}
 
 
//-->
</style>
 
</head>
 
<body>
 
<table>
  <tr class="Titre">
    <td>Colonne 1</td>
    <td>Colonne 2</td>
    <td>Colonne 3</td>
    <td>Colonne 4</td>
  </tr>
  <tr class="ligneImpaire">
    <td>ligne 1</td>
    <td>ligne 1</td>
    <td>ligne 1</td>
    <td>ligne 1</td>
  </tr>
  <tr class="lignePaire">
    <td>ligne 2</td>
    <td>ligne 2</td>
    <td>ligne 2</td>
    <td>ligne 2</td>
  </tr>
  <tr class="ligneImpaire">
    <td>ligne 3</td>
    <td>ligne 3</td>
    <td>ligne 3</td>
    <td>ligne 3</td>
  </tr>
  <tr class="lignePaire">
    <td>ligne 4</td>
    <td>ligne 4</td>
    <td>ligne 4</td>
    <td>ligne 4</td>
  </tr>
 
</table>
 
 
 
</body>
 
</html>

Ou pour répondre à la question :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function AlternateColor(MyTable){
	//Récupération du nombre de lignes
	var NbLignes = MyTable.getElementsByTagName('tr').length;
	var Lignes = new Array();
	Lignes = MyTable.getElementsByTagName('tr');
	for(var i = 0 ; i < NbLignes ; i++){
		if((i-1)%2 == 0){
			Lignes[i].style.backgroundColor = '#666';
		}
		else{
			Lignes[i].style.backgroundColor = '#ccc';
		}
	}
}

tu appels la méthode comme ceci :

<script ...>AlternateColor(document.getElementById('tontableau'))</script>

28/01/2008, 14h14
SpaceFrog

je proposerais ceci pour le teste pair impair ...

Code:

if((i&1)==0)
28/01/2008, 14h22
arnaudperfect

ok merci.

Et à votre avis, il est mieu de faire ce traitement en javascript ou PHP ? sachant qu'en PHP, cela est plus compatible avec les navigateurs.
28/01/2008, 14h36
SpaceFrog

et que javascript peut être désactivé ...
28/01/2008, 14h57
arnaudperfect

aussi. ;)

finalement, vu que ce que j'ai fais en php ressemble à votre algo en javascript, j'ai juste optimisé se que j'avais en php soit le if(($i&1)==0)

et encore merci de votre participation ;)