Problème entre rowspan et mouseover

Fermé

maxilapo - 2 avril 2012 à 15:21
Utilisateur anonyme - 18 avril 2012 à 21:59

Bonjour,

J'ai présentement un problème de tableau dans un site web alors je viens voir si quelqu'un peut m'aider.

J'ai ici un tableau :

<a href="http://www.casimages.com/img.php?i=120402032732127217.png" title="upload image">Cliquez ici pour voir mon image</a>

Comme vous pouvez voir, ma premier colonne est composé de 2 lignes fusionnés.
Sur l'évènement MouseOver, j'aimerais que la première colonne ainsi que les deux cases vis-a-vis dans "autre" sois aussi en "bleu".

Voici le code HTML :

<tr bgcolor="#CCCCCC" >
                    	<td class="EnteteListeBabillard" width="50%"><span id="SousSousTitreContenu">test></td>
                        <td class="EnteteListeBabillard" width="20%" align="center"><span id="SousSousTitreContenu">autre</span></td>
                    </tr>
                    	
                        

                    <tr bgcolor="#FFFFFF" onmouseover="ChangeColor(this, true, 33);" onmouseout="ChangeColor(this, false, 33);" onclick="DoNav('http://www.google.com/');" style="cursor: pointer;">
                    	<TH ROWSPAN=2 >Sales</TH>
                      
                        <td style="vertical-align:middle; font-size:13px;" align="center"><span style="font-weight:bold;">Sherbrooke</span></td> 
                    </tr>
                    
                    <tr bgcolor="#FFFFFF" style="cursor: pointer;">                    	
                     
                        <td style="vertical-align:middle; font-size:13px;" id="maman" align="center"><span style="font-weight:bold;">Cantons de l'est</span></td>        
                    </tr>
                    
                 
                    
                      <tr bgcolor="#FFFFFF" onclick="DoNav('http://www.google.com/');" style="cursor: pointer;">
                    	<TH ROWSPAN=2 bgcolor="#CCCCCC">Sales</TH>
                        <td style="vertical-align:middle; font-size:13px;" align="center"><span style="font-weight:bold;">Sherbrooke</span></td> 
                    </tr>
                    
                    <tr bgcolor="#CCCCCC" onclick="DoNav('http://www.google.com/');" style="cursor: pointer;">                    	
                     
                        <td style="vertical-align:middle; font-size:13px;" align="center"><span style="font-weight:bold;">Cantons de l'est</span></td>        
                    </tr>

Et voici le code Javascript qui l'accompagne (ChangeColor) :

function ChangeColor(tableRow, highLight, nombre)
	{
		if (highLight){
		  tableRow.style.backgroundColor = '#4682B4';
		  document.getElementById("TitreListeBabillard" + nombre).style.color = "#FFF";
		  document.getElementById("maman").style.background = "#4682B4";
		}
		else{
		  tableRow.style.backgroundColor = 'white';
		  document.getElementById("TitreListeBabillard" + nombre).style.color = "#F00";
		  document.getElementById("maman").style.background = '#4682B4';
		}
	}

Merci pour votre aide.

Maxime

1 réponse

Réponse 1 / 1

Utilisateur anonyme
18 avril 2012 à 21:59

Il faut que tu regardes du côté de "getElementsByClassName".

Est-ce cela que tu cherches ?

<html>
  <head>
    <script>
    function ChangeColor(nom_row, highLight, nombre){  // J'ai mis "nom_row" pour remplacer le 'table_Row' et définir le deuxième '<tr>'
      var cible = document.getElementsByClassName(nom_row);  // "getElementsByClassName" car plusieurs <tr> sont concernés. "getElementById" est unique
           
  		if(highLight){
  		  for(var i=0; i<cible.length; i++) {  // "getElementsByClassName" recherche tous les éléments avec la classe "nom_row" et les tris dans un tableau.
  		    cible[i].style.backgroundColor = '#4682B4'; // "cible[i]" correspond à cible[0], cible[1], etc...
  		  }
  		  //document.getElementById("TitreListeBabillard" + nombre).style.color = "#FFF"; // Commenté car manque variable
  		}
  		else{
  		  for(var i=0; i<cible.length; i++) {
  		    cible[i].style.backgroundColor = '';
  		  }
  		  //document.getElementById("TitreListeBabillard" + nombre).style.color = "#F00"; // Commenté car manque variable
  		}
  	}
    </script>
  </head>
  
  <body>
    <table>
      <tr bgcolor="#CCCCCC">
        <td class="EnteteListeBabillard" width="50%"><span id="SousSousTitreContenu">test</td>
        <td class="EnteteListeBabillard" width="20%" align="center"><span id="SousSousTitreContenu">autre</span></td>
      </tr>
                    	
      <tr class="maman" bgcolor="#FFFFFF" onmouseover="ChangeColor('maman', true, 33);" onmouseout="ChangeColor('maman', false, 33);" onclick="DoNav('http://www.google.com/');" style="cursor: pointer;">
        <TH ROWSPAN="2">Sales</TH>
        <td style="vertical-align:middle; font-size:13px;" align="center"><span style="font-weight:bold;">Sherbrooke</span></td> 
      </tr>
                        
      <tr class="maman" bgcolor="#FFFFFF" onmouseover="ChangeColor('maman', true, 33);" onmouseout="ChangeColor('maman', false, 33);" style="cursor: pointer;">                    	
        <td style="vertical-align:middle; font-size:13px;" align="center"><span style="font-weight:bold;">Cantons de l'est</span></td>        
      </tr>
                      
      <tr class="papa" bgcolor="#FFFFFF" onmouseover="ChangeColor('papa', true, 33);" onmouseout="ChangeColor('papa', false, 33);" onclick="DoNav('http://www.google.com/');" style="cursor: pointer;">
        <TH ROWSPAN=2 class="papa" bgcolor="#CCCCCC">Sales</TH>
        <td style="vertical-align:middle; font-size:13px;" align="center"><span style="font-weight:bold;">Sherbrooke</span></td> 
      </tr>
                      
      <tr class="papa" bgcolor="#CCCCCC" onmouseover="ChangeColor('papa', true, 33);" onmouseout="ChangeColor('papa', false, 33);" style="cursor: pointer;">                    	
        <td style="vertical-align:middle; font-size:13px;" align="center"><span style="font-weight:bold;">Cantons de l'est</span></td>        
      </tr>
    </table>
  </body>
</html>

Prends le temps de comprendre comment ça marche et tiens-nous au jus !

N'oublies pas de passer le sujet en "résolu" si c'est ok, ou de montrer ce que tu as fais pour ceux que ça pourrait aider.

A++

Discussions similaires

mouseover, mouseout