table

highlight

tableau

pointer

row

col

colonne

ligne

hilight

script

javascript

php

css

Met en valeur la colonne et la ligne de la cellule pointée dans un tableau.

FACILITER LA LECTURE DES TABLEAUX.

script : cellPointer v1.0
langage : javascript
catégorie : module
usage : Met en valeur la colonne et la ligne de la cellule pointée dans un tableau.
tags : effets spéciaux - ergonomie - tableaux

Concept

cellPointer facilite la lecture des tableaux HTML, en mettant en valeur la ligne et la colonne de la cellule sur laquelle on passe la souris.
Cet effet (assez sympathique visuellement) permet de retrouver d'un coup d'oeuil les têtes de colonne et de ligne pour la cellule survolée.

Démo

Intégration

L'intégration de cellPointer tient en quelques points, tous très faciles.
Voici un exemple :

Préparons déjà un ou plusieurs tableaux HTML, de façon ordinaire.
Donnons leur une classe css "cellPointer". Cela permettra de les identifier aisément, à la fois en css et en javascript.

<table class="cellPointer"> ... </table>

Il nous faut ensuite ajouter la balise suivante en fin de body, pour charger le script.

<script src="cellPointer.min.js" type="text/javascript"></script>

On appelle alors la fonction cellPointer, en indiquant les tableaux que nous souhaitons traiter. Dans notre exemple, il s'agit des tableaux ayant la classe css "cellPointer". (plus de détail sur le ciblage de l'effet un peu plus bas)

<script type="text/javascript">
cellPointer( ".cellPointer" );
</script>

Enfin, pour que l'effet soit visible et élégant, on fait appel à un peu de css.
Vous trouverez un guide à ce sujet un peu plus bas dans cette page, mais vous pouvez tout aussi bien utiliser la feuille de styles proposée dans le pack à télécharger.
Pour charger cette feuille de style, on place le code suivant dans le head de la page :

<link rel="stylesheet" type="text/css" media="screen" href="cellPointer.css" />

Pour obtenir un rendu encore meilleur, on pourra aussi régler l'option highlight sur {col:"col",row:"row"}. (voir le paragraphe consacré aux options)

Récaptitulons :

1. Créer des tableaux de façon normale.
2. Charger le script.
3. Déclencher le script.
4. Ajouter un peu de css pour que ça ait de la classe !

Cibler l'effet

cellPointer permet de désigner les tableaux à traiter selon une syntaxe assez souple.
Il est possible, de soumettre directement un élément HTML ou une collection d'éléments HTML :

// un élément unique
cellPointer( document.getElementById( "mon_tableau" ) );
 
// une collection d'éléments
cellPointer( document.getElementTagName( "table" ) );

Ou bien on peut encore désigner les éléments selon la syntaxe des sélecteurs css.

// désigner l'ensemble des tableaux de la page :
cellPointer( "table" );
 
// désigner un tableau par son id :
cellPointer( "#mon_id" );
 
// désigner une série de tableaux par leur classe css :
cellPointer( ".ma_classe" );

(Les anciens navigateurs (IE7, FF3.0, etc.) devront se contenter d'une syntaxe simple, comme dans les trois exemple ci-dessus. Mais les navigateurs plus récent auront accès à tout ce que permet la méthode document.querySelectorAll)

Options

Le script accepte également plusieurs options, permettant de le paramétrer en détails.
Ces options devront être organisées en un tableau associatif, et passées comme second argument de la fonction.

// préparer les options dans un tableau associatif
var options = {
  opt1 : valeur1,
  opt2 : valeur2,
  optN : valeurN
};
 
// envoyer la sauce !
cellPointer( ".cellPointer", options );

Voici la liste des options disponibles :

var options = {
  highlight: "enValeur",
  optionN: valeurN
};

var options = {
  highlight: {
	row: "dansLaMemeLigne",
	col: "dansLaMemeColonne",
  },
  optionN: valeurN
};

Design

Esprits créatifs, vous ne serez pas en reste ! cellPointer ne fait rien d'autre que d'ajouter et de retirer des classes css sur les cellules du tableau. Pour tirer le meilleur parti du script, il importe donc de faire appel à un peu de css, et à ses talents de designer.

Lorsque la souris survole un cellule du taleaux, toutes les cellules qui si trouvent sur la même ligne ou sur la même colonne reçoivent une nouvelle classe. Par défaut cette classe est nommée .highlight (les Options permettent de choisir un autre nom). En déterminant un design pour cette classe, vous modifierez l'apparence des cellules survolées.

.highlight { background-color: red; }

Les options du script permettent aussi de choisir deux classes différentes pour les cellules qui se trouvent dans la même colonne, que la cellule pointée, et celles qui sont sur la même ligne.

.row { background-color: red; }
.col { background-color: yellow; }

Notez que la celluel pointée reçoit les deux classes. On peut donc la désigner par le sélecteur css suivant :

.row.col { background-color: orange; }

Avec un peu d'astuce, on peut aussi déterminer un style à part pour les têtes de colonnes et de lignes :

thead .col { background-color: green; }
th.row { background-color: blue; }

Les options permettent également de geler l'effet sur une cellule. Pour que l'utilisateur ne soit pas surpris que l'effet ne bouge plus, il sera utile de modifier encore le style des cellules. Or précisément, cette option ajoute une classe css aux cellules lorsque l'effet est gelé. Par défaut, la classe s'appelle .freeze, mais là encore il vous est possible de choisir un autre nom, ou même deux noms différents :

// un nom
.freeze { border-color: black; }
 
// deux noms
.freezeCol, .freezeRow { border-color: black; }
.freezeRow { border-width: 1px 0; }
.freezeCol { border-width: 0 1px; }

La encore, de nombreuses combinaisons sont possible :

thead .freeze { /* têtes de colonnes */ }
th .freeze { /* têtes de lignes */ }
.row.col.freeze { /* la cellule pointée */ }
.row.freeze { /* sur la même rangée que la cellule pointée */ }
/* etc. */

Mais si vous ne tenez pas à vous soucier des css, vous pouvez simplement utiliser la feuille de style proposée dans le fichier à télécharger.

Téléchargement

Vous trouverez dans ce zip deux versions du script : l'une compactée (2Ko), et l'autre commentée, ainsi qu'une feuille de style prête à l'emploi.

compatibilité :

(autres navigateurs non testés)

effets spéciaux - ergonomie - tableaux

Commentaires