Discussion :

[Authors]

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 javascript 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 dans les 02 tableaux en sachant qu'elle (la ligne) sera toujours dans le même niveau (1,2,3...) que l'autre ligne sur l'autre tableau

j'ai placé une class : surb dans les 02 tableaux

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.surb tr:hover {
cursor:pointer;
background:red;
}

Merci d'avance

[javatwister]

Je te propose un truc un peu relou:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.red {background:red;cursor:pointer;}

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const tr=document.querySelectorAll(".surb 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")
		}
	})
})

Pas trouvé plus simple pour l'instant;

A part ça, évite de mêler css et html...

[Authors]

Salut;

Merci pour le code je vais le copier tel qu'il est mais pour le code css tu voulais dire : .surb {background:red;cursor:pointer;} et non .red {background:red;cursor:pointer;} à moins de vouloir l'inclure dans le <tr class="red" >.

je vais essayer les 02 cas

[javatwister]

Non non, je voulais dire ce que j'ai écrit;

[Authors]

le code précédent n; a pas marché peut être je n'ai pas su le reprendre mais j'ai pu avancer, sans résoudre mon Pb, avec 02 méthodes différentes :

A - sans l'emploi de javascript, elle permet de surligner la ligne voulus dans chaque tableau mais pas les 02 à la fois voilà le code:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<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'" >
<tr onMouseOver = "this.style.cursor='hand'; this.bgColor = 'orange'" onMouseOut ="this.bgColor = 'FFFFF'" >
 
<table border = "1" cellpadding = "7" align = "center" style="font-weight: bold; text-align:center;">

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 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);

Bon peut être qu à partir de ces exemples je peux développer le script et faire briller les 02 lignes ?

[Authors]

Oups petite erreur sur le 01 code il faut lire plutôt :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<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>