Voici un exemple avec DOM
Edit: problème sur le onmouseout sur une colonne avec IE, j'ai la flemme de paufiner pour l'instant
Edit²: problème corrigé (définir le background à null pour lui faire un reset ne fonctionne pas toujours avec IE)Code : Tout sélectionner
<html>
<head>
<style type="text/css">
table.colorize {
background: #eee;
border: 1px solid #e0e0e0;
}
table.colorize th {
font-weight: bold;
dont-style: italic;
}
table.colorize td {
width: 100px;
padding: 10px;
border-bottom: 1px solid #999;
border-right: 1px solid #bbb;
}
</style>
<script type="text/javascript">
var defaultBackground = "none";
// Standardisation de l'évènement : la propriété target et la méthode preventDefault
function stdEvent(e) {
if (!e && window.event)
e = window.event ;
if (!e.target && e.srcElement)
e.target = e.srcElement;
if (!e.preventDefault)
e.preventDefault = function () { this.returnValue = false ; };
return e ;
}
// ajoute un évènement
function addEvent(source, type, callback) {
if (source.addEventListener) { // code standard DOM
source.addEventListener(type, callback, false);
return true;
} else if (source.attachEvent) { // code propriétaire MSIE
var r = source.attachEvent("on"+type, callback);
return r;
} else { // code navigateur sans support DOM-event
eval('source.on' + type + '= callback') ;
}
}
// définit les évènements pour cette page
function definirEvenements(e) {
// on récupère les tables de la page
var tables = document.getElementsByTagName('table');
for (var i=0; i<tables.length; i++) {
var table = tables.item(i);
// chaque table de la classe "colorize" est dynamisée
if ((' '+table.className+' ').indexOf(' colorize ')!=-1) {
definirEvenementsTable(table);
}
}
}
// définit les onMouseOver, onMouseOut, onClick des lignes & cellules
function definirEvenementsTable(table) {
var i;
// définir la coloration par colonne pour la première ligne
if (table.rows.length>0) {
var firstRow = table.rows[0]; // premiere ligne de la table
for (i=0; i<firstRow.cells.length; i++) { // pour chaque cellule de cette ligne
addEvent(firstRow.cells[i], "mouseover", colorizeCol); // on attache l'évènement onMouseOver à la fonction colorizeCol
addEvent(firstRow.cells[i], "mouseout", colorizeCol); // on attache l'évènement onMouseOut à la fonction colorizeCol
}
}
// définir la coloration par ligne pour les suivantes
for (i=1; i<table.rows.length; i++) { // pour chaque ligne de la table, en sautant la première
addEvent(table.rows[i], "mouseover", colorizeRow); // on attache l'évènement onMouseOver à la fonction colorizeRow
addEvent(table.rows[i], "mouseout", colorizeRow); // on attache l'évènement onMouseOut à la fonction colorizeRow
}
}
// coloriser une colonne
function colorizeCol(e) {
e = stdEvent(e); // on standardise l'évènement pour avoir l'attribut target (cible de l'évènement)
var row = e.target.parentNode; // le tag "parent" de la cellule survolée : la ligne
// on cherche le numéro de colonne de la cellule survolée
var cellNum = -1;
var i;
for (i=0; i<row.cells.length; i++) { // pour chaque cellule sur la même ligne
if (row.cells[i]==e.target) { // si la cellule est celle survolée
cellNum = i; // on a son numéro
break;
}
}
// le tag "parent" de la ligne : la table
var rows = row.parentNode.rows; // les lignes de la table
var cell;
for (i=0; i<rows.length; i++) { // pour chaque ligne
cell = rows[i].cells[cellNum]; // la cellule sur la même colonne que la cellule survolée
if (e.type=="mouseover") // si c'est un évènement mouseover
cell.style.background = "red"; // on définit le fond
else if (e.type=="mouseout") // sinon c'est un évènement mouseout
cell.style.background = defaultBackground; // on remet le fond par défaut
}
}
// coloriser une ligne
function colorizeRow(e) {
e = stdEvent(e); // on standardise l'évènement pour avoir l'attribut target (cible de l'évènement)
var cells = e.target.parentNode.cells; // le tag "parent" de la cellule survolée : la ligne
var cell;
for (var i=0; i<cells.length; i++) { // pour chaque cellule de la ligne
cell = cells[i];
if (e.type=="mouseover") // si c'est un évènement mouseover
cell.style.background = "red"; // on définit le fond de la ligne
else if (e.type=="mouseout") // sinon c'est un évènement mouseout
cell.style.background = defaultBackground; // on remet le fond par défaut
}
}
// attacher les évènements à la fenêtre
if (document.getElementById) {
addEvent(window, "load", definirEvenements);
}
</script>
<title>Tableau</title>
</head>
<body>
<!-- on écrit notre table normalement, en lui donnant la classe "colorize" -->
<table class="colorize">
<tr><th>Titre1</th><th>Titre2</th><th>Titre3</th></tr>
<tr><td>Cell1.1</td><td>Cell1.2</td><td>Cell1.3</td></tr>
<tr><td>Cell2.1</td><td>Cell2.2</td><td>Cell2.3</td></tr>
<tr><td>Cell3.1</td><td>Cell3.2</td><td>Cell3.3</td></tr>
<tr><td>Cell4.1</td><td>Cell4.2</td><td>Cell4.3</td></tr>
<tr><td>Cell5.1</td><td>Cell5.2</td><td>Cell5.3</td></tr>
</table>
</body>
</html>
Tu remarqueras du même coup que grâce à DOM on ne touche pas à la table, on lui donne simplement une classe pour indiquer qu'on veut lui appliquer les évènements, et avec Javascript on parcourt les tag "table", et on applique les comportements "onmouseover" et "onmouseout" sur les éléments par parcours
sans avoir besoin de défigurer notre code HTML avec de onmousemachin dans tous les coins.
L'intérêt c'est qu'une fois que tu as compris ce code, tu t'en fais une librairie et par la suite quand tu voudras "coloriser" une table, tu as simplement à inclure cette librairie, et à ajouter la classe "colorize" aux tables que tu veux coloriser => maintenabilité maximale.
Voici un exemple avec DOM
[color=blue]Edit: problème sur le onmouseout sur une colonne avec IE, j'ai la flemme de paufiner pour l'instant[/color]
[color=darkblue]Edit²: problème corrigé (définir le background à null pour lui faire un reset ne fonctionne pas toujours avec IE)[/color][code]<html>
<head>
<style type="text/css">
table.colorize {
background: #eee;
border: 1px solid #e0e0e0;
}
table.colorize th {
font-weight: bold;
dont-style: italic;
}
table.colorize td {
width: 100px;
padding: 10px;
border-bottom: 1px solid #999;
border-right: 1px solid #bbb;
}
</style>
<script type="text/javascript">
var defaultBackground = "none";
// Standardisation de l'évènement : la propriété target et la méthode preventDefault
function stdEvent(e) {
if (!e && window.event)
e = window.event ;
if (!e.target && e.srcElement)
e.target = e.srcElement;
if (!e.preventDefault)
e.preventDefault = function () { this.returnValue = false ; };
return e ;
}
// ajoute un évènement
function addEvent(source, type, callback) {
if (source.addEventListener) { // code standard DOM
source.addEventListener(type, callback, false);
return true;
} else if (source.attachEvent) { // code propriétaire MSIE
var r = source.attachEvent("on"+type, callback);
return r;
} else { // code navigateur sans support DOM-event
eval('source.on' + type + '= callback') ;
}
}
// définit les évènements pour cette page
function definirEvenements(e) {
// on récupère les tables de la page
var tables = document.getElementsByTagName('table');
for (var i=0; i<tables.length; i++) {
var table = tables.item(i);
// chaque table de la classe "colorize" est dynamisée
if ((' '+table.className+' ').indexOf(' colorize ')!=-1) {
definirEvenementsTable(table);
}
}
}
// définit les onMouseOver, onMouseOut, onClick des lignes & cellules
function definirEvenementsTable(table) {
var i;
// définir la coloration par colonne pour la première ligne
if (table.rows.length>0) {
var firstRow = table.rows[0]; // premiere ligne de la table
for (i=0; i<firstRow.cells.length; i++) { // pour chaque cellule de cette ligne
addEvent(firstRow.cells[i], "mouseover", colorizeCol); // on attache l'évènement onMouseOver à la fonction colorizeCol
addEvent(firstRow.cells[i], "mouseout", colorizeCol); // on attache l'évènement onMouseOut à la fonction colorizeCol
}
}
// définir la coloration par ligne pour les suivantes
for (i=1; i<table.rows.length; i++) { // pour chaque ligne de la table, en sautant la première
addEvent(table.rows[i], "mouseover", colorizeRow); // on attache l'évènement onMouseOver à la fonction colorizeRow
addEvent(table.rows[i], "mouseout", colorizeRow); // on attache l'évènement onMouseOut à la fonction colorizeRow
}
}
// coloriser une colonne
function colorizeCol(e) {
e = stdEvent(e); // on standardise l'évènement pour avoir l'attribut target (cible de l'évènement)
var row = e.target.parentNode; // le tag "parent" de la cellule survolée : la ligne
// on cherche le numéro de colonne de la cellule survolée
var cellNum = -1;
var i;
for (i=0; i<row.cells.length; i++) { // pour chaque cellule sur la même ligne
if (row.cells[i]==e.target) { // si la cellule est celle survolée
cellNum = i; // on a son numéro
break;
}
}
// le tag "parent" de la ligne : la table
var rows = row.parentNode.rows; // les lignes de la table
var cell;
for (i=0; i<rows.length; i++) { // pour chaque ligne
cell = rows[i].cells[cellNum]; // la cellule sur la même colonne que la cellule survolée
if (e.type=="mouseover") // si c'est un évènement mouseover
cell.style.background = "red"; // on définit le fond
else if (e.type=="mouseout") // sinon c'est un évènement mouseout
cell.style.background = defaultBackground; // on remet le fond par défaut
}
}
// coloriser une ligne
function colorizeRow(e) {
e = stdEvent(e); // on standardise l'évènement pour avoir l'attribut target (cible de l'évènement)
var cells = e.target.parentNode.cells; // le tag "parent" de la cellule survolée : la ligne
var cell;
for (var i=0; i<cells.length; i++) { // pour chaque cellule de la ligne
cell = cells[i];
if (e.type=="mouseover") // si c'est un évènement mouseover
cell.style.background = "red"; // on définit le fond de la ligne
else if (e.type=="mouseout") // sinon c'est un évènement mouseout
cell.style.background = defaultBackground; // on remet le fond par défaut
}
}
// attacher les évènements à la fenêtre
if (document.getElementById) {
addEvent(window, "load", definirEvenements);
}
</script>
<title>Tableau</title>
</head>
<body>
<!-- on écrit notre table normalement, en lui donnant la classe "colorize" -->
<table class="colorize">
<tr><th>Titre1</th><th>Titre2</th><th>Titre3</th></tr>
<tr><td>Cell1.1</td><td>Cell1.2</td><td>Cell1.3</td></tr>
<tr><td>Cell2.1</td><td>Cell2.2</td><td>Cell2.3</td></tr>
<tr><td>Cell3.1</td><td>Cell3.2</td><td>Cell3.3</td></tr>
<tr><td>Cell4.1</td><td>Cell4.2</td><td>Cell4.3</td></tr>
<tr><td>Cell5.1</td><td>Cell5.2</td><td>Cell5.3</td></tr>
</table>
</body>
</html>[/code]
Tu remarqueras du même coup que grâce à DOM on ne touche pas à la table, on lui donne simplement une classe pour indiquer qu'on veut lui appliquer les évènements, et avec Javascript on parcourt les tag "table", et on applique les comportements "onmouseover" et "onmouseout" sur les éléments par parcours ;) sans avoir besoin de défigurer notre code HTML avec de onmousemachin dans tous les coins.
L'intérêt c'est qu'une fois que tu as compris ce code, tu t'en fais une librairie et par la suite quand tu voudras "coloriser" une table, tu as simplement à inclure cette librairie, et à ajouter la classe "colorize" aux tables que tu veux coloriser => maintenabilité maximale.
