 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Les tableaux servent à regrouper des données
tabulaires, en tout bonne logique. Cela permet d'afficher
ces données de manières plus accessibles que
si elles n'avaient été simplement jetée
aux yeux du visiteurs, séparées par espaces.
Il arrive cependant qu'un tableau regroupe un tel nombre
de données différentes qu'un fois une ligne
parcourue, on ne sait plus vraiment à quoi elle correspondait.
Ce script permet de changer la couleur de la ligne sur laquelle
passe le curseur de la souris. C'est un script très
simple mais qui peut déjà rendre de grand service
de lisibilité - pour peu que le navigateur utilisé
reconnaisse le changement de couleur des cellules d'un tableau...
Vainqueurs de la Coupe du monde de football
| ANNÉE |
FINALE |
SCORE |
LIEU |
| 1978 |
Argentine - Pays-Bas |
3 - 1 |
Buenos Aires, Argentine |
| 1982 |
Italie - Rép. fédérale d'Allemagne |
3 - 1 |
Madrid, Espagne |
| 1986 |
Argentine - Rép. fédérale d'Allemagne |
2 - 0 |
Mexico, Mexique |
| 1990 |
Rép. fédérale d'Allemagne - Argentine |
1 - 0 |
Rome, Italie |
| 1994 |
Brésil - Italie |
0* - 0 |
Pasadena, États-Unis |
| 1998 |
France - Brésil |
3 - 0 |
Paris, France |
| 2002 |
Brésil - Allemagne |
2 - 0 |
Japon / Corée du Sud |
Le code
<script>
function changeCouleur(ligne)
{
ligne.bgColor = '#C0C0C0';
}
function remetCouleur(ligne)
{
ligne.bgColor = '#FFFFFF';
}
</script>
<table>
<caption>Vainqueurs de la Coupe du monde de football</caption>
<tr><th>ANNÉE</th> <th>FINALE</th> <th>SCORE</th>
<th>LIEU</th><tr>
<tr onMouseOver="changeCouleur(this);" onMouseOut="remetCouleur(this);"><td>1978</td>
<td>Argentine - Pays-Bas</td> <td>3 - 1</td> <td>Buenos
Aires, Argentine</td></tr>
<tr onMouseOver="changeCouleur(this);" onMouseOut="remetCouleur(this);"><td>1982</td>
<td>Italie - Rép. fédérale d'Allemagne</td> <td>3
- 1</td> <td>Madrid, Espagne</td></tr>
<tr onMouseOver="changeCouleur(this);" onMouseOut="remetCouleur(this);"><td>1986</td>
<td>Argentine - Rép. fédérale d'Allemagne</td> <td>2
- 0</td> <td>Mexico, Mexique</td></tr>
<tr onMouseOver="changeCouleur(this);" onMouseOut="remetCouleur(this);"><td>1990</td>
<td>Rép. fédérale d'Allemagne - Argentine</td> <td>1
- 0</td> <td>Rome, Italie</td></tr>
<tr onMouseOver="changeCouleur(this);" onMouseOut="remetCouleur(this);"><td>1994</td>
<td>Brésil - Italie</td> <td>0* - 0</td> <td>Pasadena,
États-Unis</td></tr>
<tr onMouseOver="changeCouleur(this);" onMouseOut="remetCouleur(this);"><td>1998</td>
<td>France - Brésil</td> <td>3 - 0</td> <td>Paris,
France</td></tr>
<tr onMouseOver="changeCouleur(this);" onMouseOut="remetCouleur(this);"><td>2002</td>
<td>Brésil - Allemagne</td> <td>2 - 0</td> <td>Japon
/ Corée du Sud</td></tr>
</table>
|
