11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Changer la couleur d'une ligne de tableau au survol.

Salut.

Sur certaines de mes pages web, j'utilise un tableau (contenant des données tabulaires ! Smiley cligne ), et j'aimerais que la couleur du fond change au survol de la souris.

Très simple avec les onmouseover et onmouseout sur les balises <tr>, mais pas très propre à mon sens, d'autant plus que ça alourdit le code car c'est répété pour chaque ligne.

N'y aurait-il pas moyen de créer une fonction JavaScript indépendante du code de le page permettant d'assurer la même fonction ? Ca doit être possible en manipulant le DOM par exemple mais je n'y connais rien.

Merci Smiley smile
Modifié par 84mickael (21 Jun 2005 - 10:37)
J'ai créé une fonction qui marche :

function changeCouleurTr()
{
var ligne=document.getElementsByTagName('tr');
for(var j=0;ligne.length;j++)
{
ligne[j].onmouseover=function(){this.className='blanc';};
ligne[j].onmouseout=function(){this.className='clair';};
}
}


Je l'inclue de la façon suivante :
<script src="./js/changeCouleurTr.js" type="text/javascript"></script>


Cependant, je n'arrive pas à la faire marcher sans rajouter ceci dans le <body> :
onload="changeCouleurTr();"


Ca m'ennuie un peu, n'y-a-t'il pas une façon de coutourner ça ?

Merci
Modifié par 84mickael (20 Jun 2005 - 09:48)
Autre petit souci, mon script génère une erreur dans la console JavaScript Firefox :
a écrit :
ligne[j] has no properties
Bonjour,
84mickael a écrit :
je n'arrive pas à la faire marcher sans rajouter ceci dans le <body> :
onload="changeCouleurTr();"


Ca m'ennuie un peu, n'y-a-t'il pas une façon de coutourner ça ?

Merci 

window.onload=changeCouleurTr

C'est pas le mieux, mais le plus simple Smiley cligne
Modifié par chmel (20 Jun 2005 - 14:27)
84mickael a écrit :
Autre petit souci, mon script génère une erreur dans la console JavaScript Firefox :
ligne[j] has no properties

Il faut déclarer le tableau :
ligne= new Array()

Modifié par chmel (20 Jun 2005 - 14:37)
chmel a écrit :

Il faut déclarer le tableau :
ligne= new Array()


Ce n'est pas nécessaire en principe... enfin non, c'est sûr ! ce n'est pas nécessaire Smiley cligne

Question stupide : Y a t il des <tr> dans ta page ?

@ chmel > pourquoi dis tu que ce n'est pas le mieux d'utiliser window.onload ?? je trouve au contraire que c'est le mieux.

84mickael > as tu un exemple en ligne ?
Modifié par Olivier (20 Jun 2005 - 14:42)
Je viens de lire un bon tuto permettant de s'affranchir du code JavaScript dans le HTML, en utilisant notamment la méthode window.onload : Evenements multiples au chargement d'une page


Je préférais ne pas utiliser l'évènement 
<body onload="...">
puisque toutes mes pages ont le même entête, et toutes n'ont pas besoin de cette fonction.

Voici la page concernée : consulter.php
J'ai exactement le même problème avec une fonction qui colore les éléments de formulaires quand ils sont sélectionnés : rechercher.php


Merci de votre aide, je continue à chercher d'où vient cette petite erreur :
a écrit :
has no properties
EDIT : La déclaration de tableau n'a rien donné, et il y'a bien des <tr> dans ma page.
Modifié par 84mickael (20 Jun 2005 - 14:57)
Salut, dans la 2ème partie de la déclaration de ta boucle 'for' doit figurer une condition. Or la, tu n'y as écrit qu'un entier, la longueur...
Peut-etre que javascript comprend cela, mais il vaudrait mieux être explicite et écrire :

function changeCouleurTr()
{
var ligne=document.getElementsByTagName('tr');
for(var j=0;j<ligne.length;j++)
{
ligne[j].onmouseover=function(){this.className='blanc';};
ligne[j].onmouseout=function(){this.className='clair';};
}
}


afin q'uil n'y ait pas d'ambiguité. Je ne garantis pas que l'erreur venait de la, mais c'est une piste Smiley cligne
Olivier, excuse pour l'erreur irréfléchie. Je préfère une page HTML complète pour y voir clair.
Olivier a écrit :

pourquoi dis tu que ce n'est pas le mieux d'utiliser window.onload ??

avec un onmachin, on peut écraser un autre évènement éxistant. C'est mieux de l'ajouter.
exemple:

Voila comme je le vois, un seul évènement et des conditions :

<html>
  <head>
    <title>test couleur ligne de tableau</title>
    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>
body{background:#aaa}
table{width:100%;text-align:center}
.clair,tr{background:yellow}
.blanc{background:#fff}
</style>

<script type="text/javascript">
encours=0
function changeCouleurTr(e)
{
el=window.Event?e.target:event.srcElement; //objet sous la souris
if(!el.tagName )el=el.parentNode; // #noeud text
if(el.tagName == 'TD')el=el.parentNode;// et on remonte d'un noeud
if(el.tagName == 'TR')
  {
  if(el!=encours) // si changement
    {
    encours.className='clair';
    encours=el;
    el.className='blanc'
    }
  } else {encours.className='clair';encours=0}
}

document.onmousemove=changeCouleurTr
</script>

  </head>
  <body>
<table summary="test" >
  <tr>
    <td>ligne1 - colonne1</td>
    <td>ligne1 - colonne2</td>
    <td>ligne1 - colonne3</td>
  </tr>
  <tr>
    <td>ligne2 - colonne1</td>
    <td>ligne2 - colonne2</td>
    <td>ligne2 - colonne3</td>
  </tr>
  <tr>
    <td>ligne3 - colonne1</td>
    <td>ligne3 - colonne2</td>
    <td>ligne3 - colonne3</td>
  </tr>
</table>

  </body>
</html>

Modifié par chmel (21 Jun 2005 - 00:06)
C'était effectivement un problème dans la boucle "for".

Je n'ai même pas fait exprès de ne pas mettre de condition, c'est une faute d'inattention.

La fonction devait tout simplement chercher à accéder à la case ligne[ligne.length] qui n'existe pas.

Merci beaucoup k1000
Sujet clos
Aller à