[RESOLU] Survoler 02 lignes au même temps appartenant à 02 tableaux séparés

04 juin 2020, 12:10

Bonjour à tous ;

Quelqu'un peut m'indiquer comment surligner, au survole, 02 lignes au même temps, appartenant à 02 tableaux séparés, en utilisant javascripte et onMouseOver / onMouseOut.

L'objectif est d'amener le lecteur à lire dans les 02 lignes au même temps car leur contenu se complète.
le code suivant me permet juste de surligner un des 02 lignes, au passage du curseur, et non les 02 à la fois .

NB:
la surbrillance doit apparaître quelque soit la ligne survolée.
j'ai placé une class : surb dans les 02 tableaux

Html:

Code : Tout sélectionner

<table  border ="1" cellpadding = "7" align = "center" style="font-weight: bold; text-align:center;" class ="surb" >
<tr>   					
		<td><?php echo $queryResult['suplmji']; ?></td>
		<td><?php echo $queryResult['infajtmji']; ?></td>
		<td><?php echo $queryResult['ajtmji']; ?></td>
<tr>
</table>

<table  border ="1" cellpadding = "7" align = "center" style="font-weight: bold; text-align:center;" class ="surb" >
<tr>   					
		<td><?php echo $queryResult['suplmji']; ?></td>
		<td><?php echo $queryResult['infajtmji']; ?></td>
		<td><?php echo $queryResult['ajtmji']; ?></td>
<tr>
</table>

Code CSS

Code : Tout sélectionner

.surb tr:hover {	 
 cursor:pointer;
 background:red;
}

Merci d'avance

04 juin 2020, 13:00

il te faut du javascript.

identifie chaque ligne avec un ID unique et detecte le survol pour modifier les 2 lignes en meme temps

04 juin 2020, 19:41

Salut;
Merci pour ta réponse , je t'avoue ne pas maîtriser Javascript mais je vais faire une petite recherche

07 juin 2020, 17:28

Salut; ma recherche s'est soldé par 02 méthodes différentes mais sans arriver à faire briller les 02 lignes au même temps; voilà mes 02 méthodes à améliorer bien sur :
A - sans l'emploi de javascript, elle permet de surligner la ligne voulus dans chaque tableau mais pas les 02 à la fois voilà:

Code : Tout sélectionner

<table border = "1" cellpadding = "7" align = "center" style="font-weight: bold; text-align:center;">
<tr onMouseOver = "this.style.cursor='hand'; this.bgColor = 'orange'" onMouseOut ="this.bgColor = 'FFFFF'" >
<td><?php echo str_replace ($_POST['search'], '<span style="font-weight:bold;color:red;">'.$_POST['search'].'</span>', $queryResult['idfsrc']); ?></td>
</tr>
</table>
 
<table border = "1" cellpadding = "7" align = "center" style="font-weight: bold; text-align:center;">
<tr onMouseOver = "this.style.cursor='hand'; this.bgColor = 'orange'" onMouseOut ="this.bgColor = 'FFFFF'" >
 <td><?php echo str_replace ($_POST['search'], '<span style="font-weight:bold;color:red;">'.$_POST['search'].'</span>', $queryResult['suplmje']); ?></td>
</table>

Avantage :
- surbrillance de la ligne entière et non pas la case <td> seulement
- pas de classe ni de Id à inclure
Inconvénient : comment lier les 02 lignes au même temps sans java?

B - avec emploi du javascript, là aussi je peux passer la surbrillance sur les 02 lignes mais pas à la fois aussi seule la case <td> survolée prend la couleur
ici j'ai inclut un ID à chaque <tr>

Code : Tout sélectionner

let teste = document.getElementById("teste");
 
// Ce gestionnaire ne sera exécuté qu'une fois
// lorsque le curseur se déplace sur la liste
teste.addEventListener("mouseenter", function( event ) {   
  // on met l'accent sur la cible de mouseenter
  event.target.style.color = "purple";
 
  // on réinitialise la couleur après quelques instants
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);
 
// Ce gestionnaire sera exécuté à chaque fois que le curseur
// se déplacera sur un autre élément de la liste
teste.addEventListener("mouseover", function( event ) {   
  // on met l'accent sur la cible de mouseover
  event.target.style.color = "orange";
 
  // on réinitialise la couleur après quelques instants
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

un petit coup de pouce serait le bien venu

08 juin 2020, 08:37

si ton code B marche, il faut que tu determine l'id de la ligne soeur à partir de l'id de event.target et appliquer le même changement à l'élément à l'id correspondant.

08 juin 2020, 10:50

Bonjour;
Hélas comme je ne maîtrise pas bien javascript je ne peux aller loin dans mon élaboration.
Pourriez vous reprendre mon code et appliquer la démonstration que vous venez d'indiquer en sachant que :
Id = teste , pour <tr> du 1 tableau ( code javascript décrit en haut )
id = test , pour <tr> du 2 tableau

08 juin 2020, 12:08

Non nous ne sommes pas là pour écrire ton code à ta place.

et il te faut un id unique pour chaque ligne. du genre "table1-row1" et ainsi de suite

tu peux récupérer l'id via event.target.id changer le table1 en table2 (ou vice versa et appeler la ligne soeaur avec document.getElementByid et appliquer la même transformation.

essaye d'écrire ce code et reviens si ca marche pas on avisera

au final tu n'a que 2 tableaux sur ta page ou tu fais un tableau par cellule, car je vois pas de boucle dans la génération de ton tableaux. et tes codes précédents ne sont pas cohérent.

08 juin 2020, 16:19

Salut;
Merci pour ton intervention et ta patience

je viens d'appliquer un autre code qui a bien marché

le voici

Code : Tout sélectionner

<style>
.red {background:orange;cursor:pointer;}
</style>
 <table border = "1" cellpadding = "7" align = "center" style="font-weight:bold; text-align:center;" class ="surb">
 <thead>
 <tr style="color:#008000;">
 <th>
  <th>
  .
  .
  .
 </tr>
 </thead>
 <tbody>
	<tr>    	     
		<td><?php echo $row['prd'];?></td>
		<td><?php echo $row['ncfm_ttr'];?></td>
		<td><?php echo $row['indx'];?></td>
	       <td><?php echo $row['clsart'];?></td>
	       <td><?php echo $row['idfart'];?></td>
		 <td><?php echo $row['clsoev'];?></td>
		<td><?php echo $row['mji_autr'];?></td>
		<td><?php echo $row['titroev']; ?></td>
	</tr>
 </tbody>
  </table>
   <table border = "1" cellpadding = "7" align = "center" style="font-weight:bold; text-align:center;" class ="surb">
 <thead>
 <tr style="color:#008000;">
 <th>
  <th>
  .
  .
  .
 </tr>
 </thead>
 <tbody>
	<tr>    	     
		<td><?php echo $queryResult['suplmji']; ?></td>
		<td><?php echo $queryResult['infajtmji']; ?></td>
		<td><?php echo $queryResult['ajtmji']; ?></td>
		<td><?php echo $queryResult['infcntmji']; ?></td>
		<td><?php echo $queryResult['cntmji']; ?></td>
		<td><?php echo $queryResult['trcmjipy']; ?></td>		
		<td><?php echo $queryResult['inftrcmji'];?></td>
	       <td><?php echo $queryResult['trcmji']; ?></td>
	 	<td><?php echo $queryResult['titroev']; ?></td>
	</tr>
 </tbody>
   </table>

Maintenant le code javascript

Code : Tout sélectionner

 <script>

const tr=document.querySelectorAll(".surb tbody tr");
tr.forEach((v,i,t)=>{
	const m=t.length/2;
	v.addEventListener("mouseover",()=>{
		v.classList.add("red");
		if(i<m){
			tr[i+m].classList.add("red")
		}
		else{
			tr[i-m].classList.add("red")
		}
	})
	v.addEventListener("mouseout",()=>{
		v.classList.remove("red");
		if(i<m){
			tr[i+m].classList.remove("red")
		}
		else{
			tr[i-m].classList.remove("red")
		}
	})
})

</script>

[RESOLU] Survoler 02 lignes au même temps appartenant à 02 tableaux séparés

Qui est en ligne