Alterner la couleur des ligne dans un tableau html

**arnaudperfect** · 28/01/2008, 12h59

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 :

Merci d'avance.

**SpaceFrog** · 28/01/2008, 13h20

deux class unpour chaque couleur;

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

**Auteur** · 28/01/2008, 13h21

bonjour,

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

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
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>

**le_chomeur** · 28/01/2008, 14h02

Ou pour répondre à la question :

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
 
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>

**SpaceFrog** · 28/01/2008, 14h14

je proposerais ceci pour le teste pair impair ...

Code :

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

if((i&1)==0)

**arnaudperfect** · 28/01/2008, 14h22

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.

**SpaceFrog** · 28/01/2008, 14h36

et que javascript peut être désactivé ...

**arnaudperfect** · 28/01/2008, 14h57

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

Alterner la couleur des ligne dans un tableau html

JavaScript

Discussions similaires

Partager

Partager