Page 1 sur 1
Survoler 02 lignes au même temps appartenant à 02 tableaux séparés
Posté : 04 juin 2020, 12:10
par buda_kaka
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
Merci d'avance
Re: Survoler 02 lignes au même temps appartenant à 02 tableaux séparés
Posté : 04 juin 2020, 13:00
par Spols
il te faut du javascript.
identifie chaque ligne avec un ID unique et detecte le survol pour modifier les 2 lignes en meme temps
Re: Survoler 02 lignes au même temps appartenant à 02 tableaux séparés
Posté : 04 juin 2020, 19:41
par buda_kaka
Salut;
Merci pour ta réponse , je t'avoue ne pas maîtriser Javascript mais je vais faire une petite recherche
Re: Survoler 02 lignes au même temps appartenant à 02 tableaux séparés
Posté : 07 juin 2020, 17:28
par buda_kaka
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
Re: Survoler 02 lignes au même temps appartenant à 02 tableaux séparés
Posté : 08 juin 2020, 08:37
par Spols
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.
Re: Survoler 02 lignes au même temps appartenant à 02 tableaux séparés
Posté : 08 juin 2020, 10:50
par buda_kaka
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
Re: Survoler 02 lignes au même temps appartenant à 02 tableaux séparés
Posté : 08 juin 2020, 12:08
par Spols
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.
Re: Survoler 02 lignes au même temps appartenant à 02 tableaux séparés
Posté : 08 juin 2020, 16:19
par buda_kaka
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>