onmouseover pour modifier la couleur

Version imprimable

Bonjour,

Je veux changer la couleur de 2 cellules d'un tableau (sans utiliser de rowspan) au passage de la souris.

J'arrive à modifier une cellule grâce à une fonction javascript.
la fonction javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    function cellMouseOver(cell) {
        // Récupération de la couleur de fond
        var curBackground = cell.style.backgroundColor;
 
        // Récupération de la couleur de police utilisée
        var curColor = cell.style.color;
 
        //cell.rowSpan = 2;
 
        // Police de couleur noir
        cell.style.backgroundColor = "black";
 
        // Couleur de fond : blanc
        cell.style.color = "white";
 
        // Ajout de la fonction permettant le retour aux couleurs d'origines
        cell.onmouseout = function () {
            //cell.rowSpan = 1;
            // Restauration de la couleur de fond
            cell.style.backgroundColor = curBackground;
 
            // Restauration de la couleur de la police
            cell.style.color = curColor;
        }

le code asp.net :

Code:

tblAgenda.Rows[j].Cells[i].Attributes.Add("onmouseover", "cellMouseOver(this);");

24/02/2012, 09h57
javatwister

à première vue, si tu inclus ton mouseout dans la fonction mouseover, tu t'exposes à des soucis;
24/02/2012, 10h55
NoSmoking

Bonjour,

Citation:

Envoyé par javatwister

à première vue, si tu inclus ton mouseout dans la fonction mouseover, tu t'exposes à des soucis;

je penses que c'est pour initialiser l'événement onmouseout lors du premier survol.

En jouant avec le changement de class cela serait plus classe :D.

Mais quel est le fond du problème, est ce à partir d'une cellule survoler modifier l'aspect de plusieurs ??
24/02/2012, 11h01
Nico1383

Bonjour,

C'est exactement ça, je veux modifier 2 cellules d'un tableau à partir du survol d'une cellule.
24/02/2012, 11h19
NoSmoking

dans ce cas il te faut connaître les cellules qui seront impactées par le survol, comment sont elles référencées ?
24/02/2012, 11h41
Nico1383

Elles sont contenues dans un HtmlTable nommé tblAgenda.
24/02/2012, 12h22
NoSmoking

je me doute qu'elles sont dans une TABLE, mais quelles cellules de la TABLE il faut modifier, toutes ou seulement deux, dans ce cas il te faut bien connaître leurs références, colonne/ligne par exemple ...

Code:

1
2
3
4
5
6
7
for (int j = 0, m = 8; j < tblAgenda.Rows.Count; j++)
                {
                    // Parcours chaque cellule
                    for (int i = 1; i < m; i++)
                    {
                         tblAgenda.Rows[j].Cells[i]
                    }

J'aimerai affecté

Code:

tblAgenda.Rows[j + 1].Cells[i]

en même temps que je survolle

Code:

tblAgenda.Rows[j].Cells[i]

il te faut donc récupérer la position de la cellule survolée, ligne/colonne, comme dit précédemment, pour affecter la cellule de même colonne et de ligne +1, si existe bien sûr.

il existe pour chaque table une collection des rows et pour chaque élément des rows la collection des cells.

D'autre part il existe les propriétés rowIndex et cellIndex qui te permettent de connaître leur position relative dans leur TABLE parent.

exemple d'utilisation

Code:

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
</head>
<body>
<table id="la_table" border>
  <tr>
    <td>C1 L1</td><td>C2 L1</td><td>C3 L1</td>
  </tr>
  <tr>
    <td>C1 L2</td><td>C2 L2</td><td>C3 L2</td>
  </tr>
  <tr>
    <td>C1 L3</td><td>C2 L3</td><td>C3 L3</td>
  </tr>
</table>
<script type="text/javascript">
var oTable = document.getElementById('la_table');
var oTD = oTable.getElementsByTagName('TD');
var i, nb = oTD.length;
for( i=0; i < nb; i++){
  // get la référence de la table
  oTD[i].oTable = oTable;
  // affecte la fonction click
  oTD[i].onclick = function(){
    // récup des infos
    var oTR = this.parentNode;
    // num cellule
    var numCell = this.cellIndex;
    // num ligne
    var numRow  = oTR.rowIndex;
    // affiche les infos
    var sResult = 'click sur';
    // colonne
    sResult += '\nColonne : ' +( numCell +1);
    // ligne
    sResult += '\nLigne : '   +( numRow +1);
    // contenu
    sResult += '\nTexte : '   + this.oTable.rows[ numRow].cells[numCell].innerHTML;
    alert( sResult);
  }
}
</script>
</body>
</html>

tu as tout me semble t-il pour y arriver...

24/02/2012, 13h37
Bovino

Code:

tblAgenda.Rows.Count;

C'est quel langage ça ?
Pas du JavaScript en tout cas !

C'est de l'asp.NET.

Merci beaucoup, j'ai réussi à faire ce que je voulais :

Code:

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
function cellMouseOver(cell) {
        // Récupération de la couleur de fond
        var curBackground = cell.style.backgroundColor;
        //debug;
        // Récupération de la couleur de police utilisée
        var curColor = cell.style.color;
 
        //debug;
        //cell.rowSpan = 2;
        // Police de couleur noir
        cell.style.backgroundColor = "black";
        // Couleur de fond : blanc
        cell.style.color = "white";
 
        var table = document.getElementById('<%= tblAgenda.ClientID %>');
        this.tblAgenda
        var TD = table.getElementsByTagName('TD');
        var i, sResult, nb = TD.length;
        for (i = 0; i < nb; i++) {
            TD[i].oTable = table;
            var TR = cell.parentNode;
            var numCell = cell.cellIndex;
            var numRow = TR.rowIndex;
            if (table.rows[numRow].cells[numCell].style.backgroundColor == "black") {
                table.rows[numRow + 1].cells[numCell].style.backgroundColor = "black";
                table.rows[numRow + 1].cells[numCell].style.color = "white";
            }
        }
 
        // Ajout de la fonction permettant le retour aux couleurs d'origines
        cell.onmouseout = function () {
            //cell.rowSpan = 1;
            // Restauration de la couleur de fond
            cell.style.backgroundColor = curBackground;
            // Restauration de la couleur de la police
            cell.style.color = curBackground;
            var table = document.getElementById('<%= tblAgenda.ClientID %>');
            this.tblAgenda
            var TD = table.getElementsByTagName('TD');
            var i, sResult, nb = TD.length;
            for (i = 0; i < nb; i++) {
                TD[i].oTable = table;
                var TR = cell.parentNode;
                var numCell = cell.cellIndex;
                var numRow = TR.rowIndex;
                if (table.rows[numRow + 1].cells[numCell].style.backgroundColor == "black") {
                    table.rows[numRow + 1].cells[numCell].style.backgroundColor = curBackground;
                    table.rows[numRow + 1].cells[numCell].style.color = curBackground;
                }
            }
        }
    }

24/02/2012, 15h01
NoSmoking

oulala !!!
il reste un sacré paquet de variables initialisées qui sont inutilisées ou mal, je continu de penser que le passage par une class serait plus approprié.

Une initialisation au départ me semble également préférable à la réaffectation sur chaque survol, la mise en cache est un gain de temps non négligeable.
24/02/2012, 15h28
Nico1383

Comment tu t'y prendrais?

Citation:

Envoyé par Nico1383

Comment tu t'y prendrais?

avec le même principe que j'ai donné plus haut
- après création de la table
- récupération de toutes les TD
- pour chaque TD récupération cellule adjacente du dessous
- affectation de l'événement mouseover ET mouseout, avec changement de class de la cellule survolée et de celle adjacente du dessous

Au final cela peut donner le code suivant

Code:

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Changement couleur au survol]</title>
<style type="text/css">
.td_black {
  background-color : black;
  color : white;
  border:1px solid red;
}
</style>
</head>
<body>
<table id="la_table" border>
  <tr><td>C1 L1</td><td>C2 L1</td><td>C3 L1</td></tr>
  <tr><td>C1 L2</td><td>C2 L2</td><td>C3 L2</td></tr>
  <tr><td>C1 L3</td><td>C2 L3</td><td>C3 L3</td></tr>
  <tr><td>C1 L4</td><td>C2 L5</td><td>C3 L4</td></tr>
  <tr><td>C1 L5</td><td>C2 L5</td><td>C3 L5</td></tr>
  <tr><td>C1 L6</td><td>C2 L6</td><td>C3 L6</td></tr>
</table>
<script type="text/javascript">
var oTable = document.getElementById('la_table');
var oTR, oTD = oTable.getElementsByTagName('TD');
var numCell, numRow, i, nb = oTD.length;
for( i=0; i < nb; i++){
  // get num de la cellule
  numCell = oTD[i].cellIndex;
  // get la TR parente
  oTR = oTD[i].parentNode;
  // get la ligne suivante de celle ci
  numRow  = oTR.rowIndex +1;
  // get réf. cellule du dessous si existe
  oTD[i].autreTD = oTable.rows[numRow] ? oTable.rows[ numRow].cells[numCell] : null;
 
  // affecte la fonction mouseover
  oTD[i].onmouseover = function(){
    // modifie la class
    this.className += ' td_black'; // espace devant au cas ou il y en déjà une
    // si existe TD en dessous
    if( this.autreTD){
      this.autreTD.className += ' td_black';
    }
  }
  // affecte la fonction mouseout
  oTD[i].onmouseout = function(){
    this.className = this.className.replace(' td_black', '');
    // si existe TD en dessous
    if( this.autreTD){
      this.autreTD.className = this.autreTD.className.replace(' td_black', '');
    }
  }
}
</script>
</body>
</html>

24/02/2012, 17h46
Nico1383

Très intéressant, je vais essayer de m'en inspirer.

Merci beaucoup de ton aide.

Je te tiens au jus lundi.
27/02/2012, 08h56
Nico1383

Bonjour,

J'ai essayé ta fonction, je n'arrive pas à la faire fonctionner correctement.

J'ai bien 2 lignes de sélectionner (visible grâce au border) mais la couleur de fond n'est pas affecté.

J'ai pourtant bien ajouté la classe dans le fichier css, et la fonction m'a l'air correct, je ne vois pas trop ce qui cloche.
27/02/2012, 20h37
NoSmoking

Citation:

Envoyé par Nico1383

J'ai bien 2 lignes de sélectionner (visible grâce au border) mais la couleur de fond n'est pas affecté.

si la border et prise en compte mais pas la couleur de fond il faut revoir l'écriture des propriétés/valeurs dans le CSS.
28/02/2012, 15h19
Nico1383

Bonjour,

J'ai remarqué que l'utilisation de ton code (très bon) me pose un problème, j'ai des traitements qui s'effectuent sur le tableau (par exemple cellule qu'on ne peux pas cliquer) qui me pose problème :
par exemple, les cellules dont l'heure est dépassées ne doivent pas être affectées par le changement de couleur, ce qui n'est plus le cas avec la modification.

Pour le moment le code qui correspond le plus à mon besoin est le code précédent. Ca risque d'être lent sur une vieille machine mais ça marche comme je le souhaite.

Citation:

Envoyé par Nico1383

J'ai remarqué que l'utilisation de ton code (très bon) me pose un problème, j'ai des traitements qui s'effectuent sur le tableau (par exemple cellule qu'on ne peux pas cliquer) qui me pose problème :
par exemple, les cellules dont l'heure est dépassées ne doivent pas être affectées par le changement de couleur, ce qui n'est plus le cas avec la modification.

Rien ne t'empêches, lors de l'initialisation de mettre un flag qui autorise ou non l'action au survol.

le même script qui ne modifie pas les cases du dessous ayant un X

Code:

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
var oTable = document.getElementById('la_table');
var oTR, oTD = oTable.getElementsByTagName('TD');
var numCell, numRow, i, nb = oTD.length;
for( i=0; i < nb; i++){
  // get num de la cellule
  numCell = oTD[i].cellIndex;
  // get la TR parente
  oTR = oTD[i].parentNode;
  // get la ligne suivante de celle ci
  numRow  = oTR.rowIndex +1;
  // get réf. cellule du dessous si existe
  oTD[i].autreTD = oTable.rows[numRow] ? oTable.rows[ numRow].cells[numCell] : null;
 
  // autorisation de modif de la classe
  oTD[i].bFlag = oTD[i].innerHTML.indexOf('X') < 0;
 
  // affecte la fonction mouseover
  oTD[i].onmouseover = function(){
    // modifie la class
    this.className += ' td_black'; // espace devant au cas ou il y en déjà* une
    // si existe TD en dessous et autorisation
    if( this.autreTD && this.autreTD.bFlag){
      this.autreTD.className += ' td_black';
    }
  }
  // affecte la fonction mouseout
  oTD[i].onmouseout = function(){
    this.className = this.className.replace(' td_black', '');
    // si existe TD en dessous et autorisation
    if( this.autreTD && this.autreTD.bFlag){
      this.autreTD.className = this.autreTD.className.replace(' td_black', '');
    }
  }
}

29/02/2012, 09h01
Nico1383

Effectivement, avec l'ajout d'un drapeau pour connaitre l'état de la cellule, c'est bien vu.

Je vais regarder ça de plus près.
02/03/2012, 09h52
Nico1383

Merci pour ton aide, ça marche j'ai réussi à utiliser ton code tel quel.