 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Travailler les lignes et colonnes d'un tableau avec JavaScript |
| |
| Mettre en valeur une ligne de tableau au passage de la souris est trivial grâce à CSS. Il en est tout autre si l'on souhaite faire de même pour une colonne. Présentation d'une solution.
(07/04/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Avec l'avènement des CSS, les tableaux HTML sont aujourd'hui, la plupart du temps, utilisés selon leur objectif premier : afficher des données en rangées et colonne de cellules. Les CSS peuvent également s'appliquer à ces éléments, ce qui permet de les rendre moins mornes visuellement.
Vient maintenant l'avènement de la programmation avec le DOM, et des possibilités de JavaScript. On peut rendre une page totalement interactive sans même devoir communiquer avec le serveur. Reste à utiliser le DOM pour rendre les tableaux plus intéressants.
On sait déjà comment modifier l'aspect d'une ligne en la survolant : il suffit pour de placer des évènements onMouseOver et onMouseOut sur chaque balise <tr> :
<tr bgcolor="white" onMouseOver="this.bgColor='lightblue';" onMouseOut="this.bgColor='white';">
<td>Cellule 1</td>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
Ou, en n'utilisant que CSS pour agir de manière globale :
<style>
tr:hover {
background-color: lightblue;
}
</style>
Il est déjà plus délicat d'agir sur les colonnes, car elles ne sont pas liées entre elles par des balises. Il faut alors jongler avec le DOM. La méthode utilisée par Kevin C. Smith, de Centricle, va jusqu'à reconstruire dynamiquement le tableau, en assignant des noms de classes à chaque cellule de chaque ligne [1], et à ajouter des évènements mouseover et mouseout directement sur les cellules [2].
[1] :
for (var t = 0; t < tables.length; t++) {
var tbods = tables[t].getElementsByTagName("tbody");
for (var b = 0; b < tbods.length; b++) {
for (var r = 0; r < tbods[b].rows.length; r++)
for (var c = 0; c < tbods[b].rows[r].cells.length; c++)
tbods[b].rows[r].cells[c].className = c;}
}
}
[2]
:
cells = document.getElementsByTagName("td");
for (var c = 0; c < cells.length; c++) {
cells[c].addEventListener("mouseover", highlightColumn, true);
cells[c].addEventListener("mouseout", highlightColumn, true);
}
Ces derniers évènements appellent la fonction highlistColumn(), qui se charge des modifications d'aspect de la colonne sur laquelle le pointeur se trouve. Les lignes sont elles gérées avec CSS. |
|
|
|
|
|
|
