J'essaie d'afficher un tableau au survol pour les éléments en lignes et en colonnes. Remarque: les données des lignes et des colonnes sont également dans un accordéon. Les données sont dans 4 colonnes et peuvent être n'importe quel nombre de lignes. Les données de chaque table à afficher en survol contiennent 5 colonnes et peuvent être n'importe quel nombre de lignes.
J'ai écrit le CSS / HTML suivant qui affiche les 4 colonnes de données (c'est-à-dire le nom du jockey et le nombre de courses) lorsque le l'accordéon est ouvert. Remarque: Chacun de ces éléments aura une table associée à afficher en survol.
Comme vous le verrez, j'ai réussi à afficher la table associée pour chaque élément en survol dans la première ligne, cependant, j'ai été incapable de faire de même pour l'un des éléments suivants dans les lignes et colonnes restantes.
Remarque: à des fins de test, j'ai intentionnellement laissé la surbrillance de chaque élément en «rouge» lors du survol. p>
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp">ADAM HYERONIMUS HAS 5 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
<a href="#" id="ShowJockey">JAMES INNES JR. HAS 1 RIDE.</a>
</p>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
<a href="#" id="ShowJockey">KERRIN MCEVOY HAS 6 RIDES.</a>
</p>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
<a href="#" id="ShowJockey">SAM CLIPPERTON HAS 1 RIDE.</a>
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">JAMES MCDONALD HAS 6 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">TIM CLARK HAS 2 RIDES.</a>
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">JASON COLLETT HAS 3 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">RACHEL KING HAS 2 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a>
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
</p>
</div>
</div>
</div>
.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
#jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
#jockeys td,
#jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
#jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
#jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
#ShowJockey:hover+#jockeys {
display: block;
}
div.hoverPopUp {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
}
div.hoverPopUp td,
div.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
div.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
margin-top: 1em;
padding-top: 10px;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
a.hoverHereToPopUp:hover+div.hoverPopUp {
display: block;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
Si j'essaie d'ajouter le même code et le ou les éléments suivants dans la (les) colonne (s) DIV (c'est-à-dire les éléments actuellement contenus dans la balise de paragraphe, cela devrait être la ligne 2, la ligne 3 et ainsi de suite ..., je perds la structure et le format de la colonne, et les href définis sont tous mal alignés et partiellement ou complètement cachés jusqu'à ce qu'ils soient survolés.
Remarque: Les noms des jockey doivent apparaître dans l'ordre alphabétique de gauche à à droite.
De plus mais pas aussi important que ce qui précède, il semble que le tableau affiché soit limité à la largeur de la colonne. Lorsque j'essaie d'agrandir la largeur, le côté droit du tableau est masqué par la colonne suivante (le tableau est derrière les colonnes à sa droite). J'aimerais également savoir s'il existe un moyen de contourner ce problème et d'afficher le tableau "au-dessus" (au-dessus) des colonnes supplémentaires afin que je puisse étendre la largeur .
Toutes mes excuses pour la longueur du code HTML, mais je pense que vous devez voir ce qui se passe.
3 Réponses :
Un identifiant ne peut pas être utilisé plus d'une fois sur une page. Je les ai donc remplacés par class . ( #jockeys -> .jockeys , #ShowJockey -> .ShowJockey )
Vous ne pouvez pas mettre div dans une balise p . Nous devons donc remplacer les balises p par div .
En bref, il est impossible de placer un élément
dans le DOM car la balise d'ouverture
élément. Réf sup>
J'ai créé un extrait.
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button> <div class="panel5"> <div class="row"> <div class="column"> <a class="hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">click here </a> <div class="parentDiv"> <a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey hoverHereToPopUp">KERRIN MCEVOY HAS 6 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey hoverHereToPopUp">SAM CLIPPERTON HAS 1 RIDE.</a> </div> </div> <div class="column"> <a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a><div class="parentDiv"> <a href="#" class="ShowJockey hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">click here</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">TIM CLARK HAS 2 RIDES.</a> </div> </div> <div class="column"> <a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a> <div class="parentDiv"> <a href="#" class="ShowJockey">JASON COLLETT HAS 3 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">RACHEL KING HAS 2 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a> </div> </div> <div class="column"> <a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a> <div class="parentDiv"> <a href="#" class="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a> </div> <div class="parentDiv"> </div> </div> </div> </div>/* I minified the css because stackoverflow does not allow to over 30000 character body. this css same with the above snippet.*/ .accordion{background-color:#388070;border:1px;border-bottom:10px;border-color:#f0f0f0;border-radius:3px;border-style:solid;border-width:2px;color:#fff;cursor:pointer;font-size:12px;font-weight:400;line-height:1.2;letter-spacing:2px;padding:12px;outline:0;text-align:left;transition:.4s;width:100%;margin:auto!important}.accordion:hover,.active{background-color:transparent;border:1px;border-color:#388070;border-style:solid;border-width:2px;color:#388070}.accordion:after{content:"\002B";color:#388070;font-size:12px;float:right;margin-left:5px}.active:after{color:#388070;content:"\2212"}.panel5{border:1px;border-bottom:10px;border-color:#f0f0f0;border-style:solid;border-width:2px;padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:25px;display:none;background-color:#fff;overflow:hidden}.column{float:left;width:25%;font-size:7pt;color:#000;font-family:Lato;font-weight:400;line-height:1.2;background-color:#fff;column-gap:3px}.myrow{float:left;width:100%;font-size:7pt;color:#000;font-family:Lato;font-weight:400;line-height:1.2;background-color:#fff}.myrow:after{content:"";display:table;clear:both}a:link,a:visited{background-color:transparent;color:#07342a;display:inline-block;font-family:Lato,sans-serif;font-size:12px;text-align:center;text-decoration:none}a:active,a:hover{background-color:transparent;color:#303030;font-weight:700}.jockeys{border-collapse:collapse;display:none;font-family:Lato,sans-serif;font-size:12px;width:100%}.jockeys td,.jockeys th{border:1px solid #ddd;padding:8px}.jockeys th{background-color:#07342a;color:#fff;font-family:Lato,sans-serif;font-size:12px;letter-spacing:1px;padding-top:12px;padding-bottom:12px;text-align:left}.jockeys tr:nth-child(even){background-color:#f2f2f2}.ShowJockey:hover+.jockeys{display:block}.hoverPopUp{border-collapse:collapse;font-family:Lato,sans-serif;font-size:9px;text-align:center;background-color:#fff}.hoverPopUp td,.hoverPopUp th{border:1px solid #ddd;padding:5px}.hoverPopUp th{background-color:#07342a;color:#fff;font-family:Lato,sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;padding-top:5px;padding-bottom:5px;text-align:center}a.hoverHereToPopUp{background-color:#fff;color:#07342a;font-family:Lato,sans-serif;font-size:12px;letter-spacing:1px;line-height:1.2;text-align:left}a:active,a:hover{background-color:transparent;color:red;font-weight:700}table.center{margin-left:auto;margin-right:auto;border-spacing:1}[data-hover-wrapper]{transition:opacity .3s,transform .3s}.parentDiv{line-height:16px;letter-spacing:1px;padding-top:10px;text-align:left}var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } const links = document.querySelectorAll(".hoverHereToPopUp"); [...links].forEach((link) => { link.addEventListener("click", handleClick); }); function handlePosition(e) { const ID = e.target.getAttribute("data-hover-id"); const wrapper = document.getElementById(ID); if (`${e.target.getBoundingClientRect().left}` <= 0) { return `position: fixed; left: 0px; top:${ e.target.getBoundingClientRect().top + 20 }`; } else { return `position: fixed; left: ${ e.target.getBoundingClientRect().left }px; top:${e.target.getBoundingClientRect().top + 20}px`; } } function handleClick(e) { const others = document.querySelectorAll("[data-hover-wrapper]"); others.forEach((p) => { p.style.opacity = 0; p.style.transform = "scale(.8)"; setTimeout(() => { p.remove(); }, 150); }); const hoverContent = e.target.getAttribute("data-hover-content"); const ID = Math.random().toString(36).substr(2, 9); const wrapper = document.createElement("DIV"); e.target.setAttribute("data-hover-id", ID); wrapper.setAttribute("data-hover-wrapper", ""); wrapper.setAttribute("id", ID); wrapper.setAttribute("style", "opacity: 0; transform: scale(.8)"); wrapper.innerHTML = hoverContent; document.body.append(wrapper); wrapper.setAttribute("style", handlePosition(e)); } document.addEventListener("click", (e) => { const specifiedElement = document.querySelectorAll("[data-hover-wrapper]"); specifiedElement.forEach((p) => { let isClickInside = p.contains(event.target); if ( !isClickInside && !event.target.classList.contains("hoverHereToPopUp") ) { const others = document.querySelectorAll("[data-hover-wrapper]"); others.forEach((p) => { p.style.opacity = 0; p.style.transform = "scale(.8)"; setTimeout(() => { p.remove(); }, 150); }); } }); });Ici aussi, je montre les tableaux avec une bien meilleure méthode. Mais vous devez donner à vos tables l'attribut
data-hover-content. Voir les liens 1. et 6.
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button> <div class="panel5"> <div class="row"> <div class="column"> <a class="hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">hover here </a> <div class="parentDiv"> <a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey hoverHereToPopUp">KERRIN MCEVOY HAS 6 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey hoverHereToPopUp">SAM CLIPPERTON HAS 1 RIDE.</a> </div> </div> <div class="column"> <a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a> <div class="parentDiv"> <a href="#" class="ShowJockey hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">hover here</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">TIM CLARK HAS 2 RIDES.</a> </div> </div> <div class="column"> <a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a> <div class="parentDiv"> <a href="#" class="ShowJockey">JASON COLLETT HAS 3 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">RACHEL KING HAS 2 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a> </div> </div> <div class="column"> <a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a> <div class="parentDiv"> <a href="#" class="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a> </div> <div class="parentDiv"> </div> </div> </div> </div>.accordion { background-color: #388070; border: 1px; border-bottom: 10px; border-color: #f0f0f0; border-radius: 3px; border-style: solid; border-width: 2px; color: #ffffff; cursor: pointer; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 2px; padding: 12px; outline: none; text-align: left; transition: 0.4s; width: 100%; margin: auto !Important; } .active, .accordion:hover { background-color: transparent; border: 1px; border-color: #388070; border-style: solid; border-width: 2px; color: #388070; } .accordion:after { content: "\002B"; /* Unicode character for "plus" sign (+) */ color: #388070; font-size: 12px; float: right; margin-left: 5px; } .active:after { color: #388070; content: "\2212"; /* Unicode character for "minus" sign (-) */ } .panel5 { border: 1px; border-bottom: 10px; border-color: #f0f0f0; border-style: solid; border-width: 2px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 25px; display: none; background-color: white; overflow: hidden; } .column { float: left; width: 25%; font-size: 7pt; color: black; font-family: Lato; font-weight: normal; line-height: 1.2; background-color: white; column-gap: 3px; } .myrow { float: left; width: 100%; font-size: 7pt; color: black; font-family: Lato; font-weight: normal; line-height: 1.2; background-color: white; } .myrow:after { content: ""; display: table; clear: both; } a:link, a:visited { background-color: transparent; color: #07342a; display: inline-block; font-family: 'Lato', sans-serif; font-size: 12px; text-align: center; text-decoration: none; } a:hover, a:active { background-color: transparent; color: #303030; font-weight: bold; } .jockeys { border-collapse: collapse; display: none; font-family: 'Lato', sans-serif; font-size: 12px; width: 100%; } .jockeys td, .jockeys th { border: 1px solid #dddddd; padding: 8px; } .jockeys th { background-color: #07342a; color: white; font-family: 'Lato', sans-serif; font-size: 12px; letter-spacing: 1px; padding-top: 12px; padding-bottom: 12px; text-align: left; } .jockeys tr:nth-child(even) { background-color: #f2f2f2; } .ShowJockey:hover+.jockeys { display: block; } .hoverPopUp { border-collapse: collapse; font-family: 'Lato', sans-serif; font-size: 9px; text-align: center; background-color: #fff; } .hoverPopUp td, .hoverPopUp th { border: 1px solid #dddddd; padding: 5px; } .hoverPopUp th { background-color: #07342a; color: white; font-family: 'Lato', sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 1px; padding-top: 5px; padding-bottom: 5px; text-align: center; } a.hoverHereToPopUp { background-color: white; color: #07342a; font-family: 'Lato', sans-serif; font-size: 12px; letter-spacing: 1px; line-height: 1.2; text-align: left; } a:hover, a:active { background-color: transparent; color: red; font-weight: bold; } table.center { margin-left: auto; margin-right: auto; border-spacing: 1; } [data-hover-wrapper] { transition: opacity .3s, transform .3s } .parentDiv { line-height: 16px; letter-spacing: 1px; padding-top: 10px; text-align: left; }var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } const links = document.querySelectorAll(".hoverHereToPopUp"); [...links].forEach(link => { link.addEventListener("mouseover", handleMouseOver); link.addEventListener("mousemove", handleMouseMove); link.addEventListener("mouseleave", handleMouseLeave); }); function handlePosition(e) { const ID = e.target.getAttribute("data-hover-id"); const wrapper = document.getElementById(ID); let top = ""; if (!(e.target.getBoundingClientRect().top + wrapper.offsetHeight > innerHeight)) { top = `${e.clientY + e.target.offsetHeight}px`; } else { top = `${e.clientY - (wrapper.offsetHeight + e.target.offsetHeight)}px`; } if (`${e.clientX - wrapper.offsetWidth / 2}` <= 0) { return `position: fixed; left: 0px; top:${top}`; } else { return `position: fixed; left: ${e.clientX - wrapper.offsetWidth / 2}px; top:${top}`; } } function handleMouseOver(e) { const hoverContent = e.target.getAttribute("data-hover-content"); const ID = Math.random() .toString(36) .substr(2, 9); const wrapper = document.createElement("DIV"); e.target.setAttribute("data-hover-id", ID); wrapper.setAttribute("data-hover-wrapper", ""); wrapper.setAttribute("id", ID); wrapper.setAttribute("style", "opacity: 0; transform: scale(.8)"); wrapper.innerHTML = hoverContent; document.body.append(wrapper); wrapper.setAttribute("style", handlePosition(e)); } function handleMouseLeave(e) { const ID = e.target.getAttribute("data-hover-id"); document.getElementById(ID).style.opacity = 0; document.getElementById(ID).style.transform = "scale(.8)"; setTimeout(() => { document.getElementById(ID).remove(); }, 150); } function handleMouseMove(e) { const ID = e.target.getAttribute("data-hover-id"); const wrapper = document.getElementById(ID); wrapper.setAttribute("style", handlePosition(e)); } window.addEventListener('scroll', () => { const wrapper = document.querySelector('[data-hover-wrapper]'); if (wrapper) wrapper.remove(); });J'ai compressé le code de la table car les extraits de code Stackoverflow ne permettent pas trop de code.
Voici un autre exemple. ( Je pense que le meilleur ) Cela fonctionne avec le clic.
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button> <div class="panel5"> <div class="row"> <div class="column"> <a class="hoverHereToPopUp">hover here</a> <div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div> <div class="parentDiv"> <a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a> <div class="parentDiv"> <a href="#" class="ShowJockey hoverHereToPopUp">KERRIN MCEVOY HAS 6 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey hoverHereToPopUp">SAM CLIPPERTON HAS 1 RIDE.</a> </div> </div> </div> <div class="column"> <a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a> <div class="parentDiv"> <a href="#" class="ShowJockey hoverHereToPopUp">hover here</a> <div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">TIM CLARK HAS 2 RIDES.</a> </div> </div> <div class="column"> <a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a> <div class="parentDiv"> <a href="#" class="ShowJockey">JASON COLLETT HAS 3 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">RACHEL KING HAS 2 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a> </div> </div> <div class="column"> <a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a> <div class="parentDiv"> <a href="#" class="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a> </div> <div class="parentDiv"> <a href="#" class="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a> </div> <div class="parentDiv"> </div> </div> </div> </div>.accordion { background-color: #388070; border: 1px; border-bottom: 10px; border-color: #f0f0f0; border-radius: 3px; border-style: solid; border-width: 2px; color: #ffffff; cursor: pointer; font-size: 12px; padding: 12px; outline: none; text-align: left; transition: 0.4s; width: 100%; margin: auto !Important; } .active, .accordion:hover { background-color: transparent; border: 1px; border-color: #388070; border-style: solid; border-width: 2px; color: #388070; } .accordion:after { content: "\002B"; /* Unicode character for "plus" sign (+) */ color: #388070; font-size: 12px; float: right; margin-left: 5px; } .active:after { color: #388070; content: "\2212"; /* Unicode character for "minus" sign (-) */ } .panel5 { border: 1px; border-bottom: 10px; border-color: #f0f0f0; border-style: solid; border-width: 2px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 25px; display: none; background-color: white; overflow: hidden; } .column { float: left; width: 25%; font-size: 7pt; color: black; font-family: Lato; font-weight: normal; line-height: 1.2; background-color: white; column-gap: 3px; } .myrow { float: left; width: 100%; font-size: 7pt; color: black; font-family: Lato; font-weight: normal; line-height: 1.2; background-color: white; } .myrow:after { content: ""; display: table; clear: both; } a:link, a:visited { background-color: transparent; color: #07342a; display: inline-block; font-family: 'Lato', sans-serif; font-size: 12px; text-align: center; text-decoration: none; } a:hover, a:active { background-color: transparent; color: #303030; font-weight: bold; } .jockeys { border-collapse: collapse; display: none; font-family: 'Lato', sans-serif; font-size: 12px; width: 100%; } .jockeys td, .jockeys th { border: 1px solid #dddddd; padding: 8px; } .jockeys th { background-color: #07342a; color: white; font-family: 'Lato', sans-serif; font-size: 12px; letter-spacing: 1px; padding-top: 12px; padding-bottom: 12px; text-align: left; } .jockeys tr:nth-child(even) { background-color: #f2f2f2; } .ShowJockey:hover+.jockeys { display: block; } .hoverPopUp { border-collapse: collapse; display: none; font-family: 'Lato', sans-serif; font-size: 9px; text-align: center; } .hoverPopUp td, .hoverPopUp th { border: 1px solid #dddddd; padding: 5px; } .hoverPopUp th { background-color: #07342a; color: white; font-family: 'Lato', sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 1px; padding-top: 5px; padding-bottom: 5px; text-align: center; } a.hoverHereToPopUp { background-color: white; color: #07342a; font-family: 'Lato', sans-serif; font-size: 12px; letter-spacing: 1px; line-height: 1.2; text-align: left; } a:hover, a:active { background-color: transparent; color: red; font-weight: bold; } a.hoverHereToPopUp:hover+.hoverPopUp { display: block; } table.center { margin-left: auto; margin-right: auto; border-spacing: 1; } .parentDiv { line-height: 16px; letter-spacing: 1px; padding-top: 10px; text-align: left; }var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); }
Merci beaucoup pour vos efforts ici. C'était une excellente réponse et je l'utiliserai probablement à l'avenir. Tous mes vœux!
Permettez-moi de réviser vos exigences, Vous allez créer un tableau avec X lignes et Y colonnes, en survolant n'importe quelle cellule dont vous avez besoin pour afficher un autre tableau, n'est-ce pas?
Tout d'abord, je suggérerais qu'au lieu des tables, vous pouvez choisir «flex» ou «grid» afin que le DOM soit créé en moins de temps que pour les tables.
Considérons maintenant un tableau avec X lignes et Y colonnes, pour chaque cellule, vous pouvez définir l'événement onmouseover.
fonction showAssociatedTable (cellId) { Je pense avoir trouvé une autre solution possible à votre problème. Avec cette solution, contrairement aux autres réponses également excellentes, il n'y a pas de bouton séparé «survolez-moi» ou «cliquez-moi». Survolez simplement une cellule et affichez le tableau associé. J'ai nettoyé et modifié un peu votre code html pour en faire un Désormais, chaque cellule de données individuelle de la table Cette fonction définit d'abord l'opacité de toutes les autres cellules sur Ensuite, les positions x et y de la cellule elle-même sont calculées pour définir la position de la Btw, d'où proviennent ces données? S'il s'agit d'une api ou quelque chose du genre, je vous conseille vivement de créer les tableaux avec du code, au chargement de la page. Cela vous fera gagner beaucoup de temps. J'espère que cela vous aidera! Sinon, veuillez commenter J'ai rendu le J'espère que cela vous aidera!
Beau travail ici @Chiel Une chose que j'ai négligé de mentionner est qu'il y aura plusieurs accordéons sur chaque page, affichés les uns après les autres, comme une liste, si vous voulez. Ainsi, lorsqu'un accordéon est ouvert, lors du survol, la table doit être affichée au-dessus des accordéons suivants, qu'ils soient ouverts ou non.
@BillyJ Oké super, je vois. Donc (pour être sûr) à un moment donné, un seul tableau «détail» est visible? C’est une solution simple: la fonction ‘showDetail’ doit calculer la distance entre l’accordéon et le haut de la page. Ajoutez ensuite cette valeur à "cellPos.y" et cela devrait fonctionner. Cependant, je suis actuellement sur mobile et je ne pourrai pas le réparer avant demain matin ... désolé
@BillyJ Comme il semble y avoir plusieurs instances de la table, le code ne fonctionnera qu'avec la première table (pour le moment) car elle contient les identifiants uniques. Je devrai le réécrire un peu demain (puisque je ne le savais pas au moment de publier la réponse) pour le faire fonctionner avec plusieurs accordéons
Merci pour votre réponse rapide. Oui, c’est exact, un seul tableau «détail» doit être visible à la fois en survol et il y aura «toujours» un tableau pour chaque «détail» (par exemple, le nombre de manèges du jockey, etc.) dans chaque accordéon. J'attends votre réponse avec impatience.
@BillyJ J'espère que cela ressemble maintenant à ce que vous vouliez!
Cela a l'air génial! Merci pour tous vos efforts ici. Je vais jouer avec ça maintenant et vous faire savoir si j'ai des questions. Acclamations!
@BillyJ est ravi de voir que cela vous a aidé!
Salut @Chiel J'ai découvert un problème avec le code. Dans nos données de test, nous avons utilisé 4 lignes de données pour chaque panneau pour chaque accordéon. Une fois que je dépasse 4 lignes de données, l'accordéon ne s'affiche pas correctement. Les données (lignes) du panneau s'affichent en dehors de la bordure et chevauchent le bouton suivant. J'ai testé un certain nombre de modifications de propriétés, mais je n'arrive pas à les faire fonctionner correctement. Peux-tu aider s'il te plait? Merci d'avance.
Bonjour @BillyJ, lors de l'ajout de lignes, avez-vous simplement copié la ligne ci-dessus ou avez-vous ajouté des lignes avec des identifiants personnalisés (
J'ai ajouté des lignes avec de nouveaux identifiants personnalisés consécutifs. (Remarque: je crée en fait ce fichier avec de nouvelles données chaque jour donc le nombre de lignes fluctue pour chaque panneau et le nombre de lignes peut aller de 1 à 20). Le problème est que lorsqu'il y a plus de 4 lignes, les lignes supplémentaires "débordent" en dehors de la bordure du panneau et s'affichent au-dessus du bouton suivant. J'ai bricolé les propriétés d'affichage, de hauteur, de remplissage, de position et de débordement, mais je ne vois pas comment les afficher correctement. En guise de test, changez la bordure du panneau en "rouge" et ajoutez quelques lignes et vous verrez ce que je veux dire.
Salut, je pense l'avoir résolu: changez la propriété height du
Ahh, oui. Je pense que tu as. ;-) Merci beaucoup mon ami. Cela semble très bien! Acclamations!
// ici vous pouvez ajouter la table associée ou
// vous pouvez basculer css pour la table associée avec affichage: "aucun" ou "bloc"
}
0 commentaires
1
votes
. Ce qui présente de nombreux avantages, comme une structure agréable et propre.
.overall a un attribut onmouseover = "showDetail (this.id) " de sorte que, lorsque vous survolez l'élément, il déclenche cette fonction et transmet l'id ( Jockey- # ) à la fonction showDetail . 0.3 pour faire ressortir le .hoverPopUp en arrière-plan. Ensuite, l'opacité de la cellule survolée est définie sur 1 . Pour que les utilisateurs sachent de quoi il s'agit. detailTable juste en dessous de la cellule sélectionnée.
<body>
<h3>Some nice data</h3>
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel" id="panel-1">
<table class="overall">
<tbody>
<tr>
<td id="Jockey-1" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ADAM HYERONIMUS HAS 5 RIDES.</td>
<td id="Jockey-2" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES INNES JR. HAS 1 RIDE.</td>
<td id="Jockey-3" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">KERRIN MCEVOY HAS 6 RIDES.</td>
<td id="Jockey-4" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">SAM CLIPPERTON HAS 1 RIDE.</td>
</tr>
<tr>
<td id="Jockey-5" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ANDREW ADKINS HAS 1 RIDE.</td>
<td id="Jockey-6" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES MCDONALD HAS 6 RIDES.</td>
<td id="Jockey-7" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">NASH RAWILLER HAS 1 RIDE.</td>
<td id="Jockey-8" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TIM CLARK HAS 2 RIDES.</td>
</tr>
<tr>
<td id="Jockey-9" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">BRENTON AVDULLA HAS 2 RIDES.</td>
<td id="Jockey-10" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JASON COLLETT HAS 3 RIDES.</td>
<td id="Jockey-11" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">RACHEL KING HAS 2 RIDES.</td>
<td id="Jockey-12" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TOMMY BERRY HAS 3 RIDES.</td>
</tr>
<tr>
<td id="Jockey-13" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">GLEN BOSS HAS 2 RIDES.</td>
<td id="Jockey-14" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</td>
<td id="Jockey-15" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ROBBIE DOLAN HAS 4 RIDES.</td>
<td id="Jockey-16" class="hoverHereToPopUp"></td>
</tr>
</tbody>
</table>
<div class="hoverPopUp" id="Jockey-1-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-6-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-11-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-13-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
No data available
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-14-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
</div>
<p>Well well more data</p>
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel" id="panel-2">
<table class="overall">
<tbody>
<tr>
<td id="Jockey-17" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ADAM HYERONIMUS HAS 5 RIDES.</td>
<td id="Jockey-18" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES INNES JR. HAS 1 RIDE.</td>
<td id="Jockey-19" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">KERRIN MCEVOY HAS 6 RIDES.</td>
<td id="Jockey-20" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">SAM CLIPPERTON HAS 1 RIDE.</td>
</tr>
<tr>
<td id="Jockey-21" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ANDREW ADKINS HAS 1 RIDE.</td>
<td id="Jockey-22" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES MCDONALD HAS 6 RIDES.</td>
<td id="Jockey-23" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">NASH RAWILLER HAS 1 RIDE.</td>
<td id="Jockey-24" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TIM CLARK HAS 2 RIDES.</td>
</tr>
<tr>
<td id="Jockey-25" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">BRENTON AVDULLA HAS 2 RIDES.</td>
<td id="Jockey-26" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JASON COLLETT HAS 3 RIDES.</td>
<td id="Jockey-27" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">RACHEL KING HAS 2 RIDES.</td>
<td id="Jockey-28" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TOMMY BERRY HAS 3 RIDES.</td>
</tr>
<tr>
<td id="Jockey-29" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">GLEN BOSS HAS 2 RIDES.</td>
<td id="Jockey-30" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</td>
<td id="Jockey-31" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ROBBIE DOLAN HAS 4 RIDES.</td>
<td id="Jockey-32" class="hoverHereToPopUp"></td>
</tr>
<tbody>
</table>
<div class="hoverPopUp" id="Jockey-17-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-22-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-28-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-32-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
No data available
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-30-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
</div>
<br><br><br><br><br><br>
</body>
.accordion {
background-color: #388070;
border: 2px solid #f0f0f0 border-bottom: 10px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.accordion:first-child {
display: block;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
/* Renamed .panel5 to .panel */
/* Each panel has now an id of #panel-# */
.panel {
border: 2px solid #f0f0f0;
border-bottom: 10px;
padding: 5px 5px 5px 25px;
display: none;
background-color: white;
position: relative;
width: 95%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.panel:first-child {
display: block;
}
.overall {
border-collapse: collapse;
width: 90%;
}
.overall td {
font-size: 9pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
padding: 5px;
}
.overall tr {
font-size: 7pt;
color: black;
font-family: 'Lato';
font-weight: normal;
line-height: 1.2;
background-color: white;
}
/* Default table styles above*/
.hoverPopUp {
display: none;
padding: 10px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
position: absolute;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
/* Adds some depth and clarity */
z-index: 5 !important;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc;
}
.jockeys {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
border-collapse: collapse;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
.jockeys td,
.jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
.jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function showDetail(jockeyId) {
setClassOpacity("hoverHereToPopUp", 0.3);
//get the selected cell
var jockeyCell = document.getElementById(jockeyId);
let jockeyDetailId = jockeyId + '-detail';
jockeyCell.style.opacity = 1;
jockeyCell.onmouseout = function() {
if (detail = document.getElementById(jockeyDetailId)) {
detail.style.display = "none";
}
setClassOpacity("hoverHereToPopUp", 1);
}
//get the relative parent of each cell
// cell <tr> <tbody> <table> <div id="panel-#">
var jockeyParent = jockeyCell.parentElement.parentElement.parentElement.parentElement;
//calculate the position of the selected cell
let cellPos = {};
//get the position relative to it's parent
let bodyRect = jockeyParent.getBoundingClientRect();
let jockeyRect = jockeyCell.getBoundingClientRect();
cellPos.x = jockeyRect.left - bodyRect.left;
cellPos.y = jockeyRect.top - bodyRect.top;
//set position of ".hoverPopUp" thus the detail tabe
var dataDiv = document.getElementById(jockeyDetailId);
if (!dataDiv) {
//no table specified so create an empty one just for now
let temporaryTable = `<div class="hoverPopUp" id="${jockeyDetailId}">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>No data</td>
<td>No data</td>
<td>No data</td>
<td>No data</td>
<td>No data</td>
</tr>
</table>
</div>`;
jockeyParent.innerHTML += temporaryTable;
dataDiv = document.getElementById(jockeyDetailId);
}
if (cellPos.x < bodyRect.width / 2) {
dataDiv.style.left = 0;
} else {
dataDiv.style.right = 0;
}
dataDiv.style.top = (cellPos.y + 1.5 * jockeyRect.height) + "px";
dataDiv.style.display = "block";
}
//set the opacity of all the other elements lower to increase clarity and readability
function setClassOpacity(className, opacity) {
var cells = document.getElementsByClassName(className);
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.style.opacity = opacity;
}
}
Modifier
standardTable maintenant relatif. Aussi au lieu de .panel5 chaque panneau a maintenant une classe de panel et un identifiant de panel- # afin de les identifier. J'ai supposé que chaque jockey dans chaque panneau est unique, si ce n'est pas le cas, je devrais peut-être réécrire quelques bits. Ajout d'un box-shadow et d'un z-index aux tableaux de détail pour les rendre plus visibles.
12 commentaires
Jockey - {#} )? Parce que quand je clone juste la ligne avec des jockeys, le .hoverPopUp ne disparaîtra pas si je ne le survole pas. Est-ce votre problème?
panel de 150px en auto. Voir ici: .panel {... height: auto; ...} J'espère que cela vous aidera!
codepen.io/rudesoul/pen/MWKQZbP Je l'ai fait, mais si vous pouviez faire l'exigence plus clair, plus d'amélioration peut être faite :)