在 hover 上顯示多行多列元素的表格

Question

我正在嘗試在 hover 上為行和列中的元素顯示一個表格。 注意：行和列中的數據也在手風琴中。 數據分為 4 列，可以是任意數量的行。 hover 上顯示的每個表的數據包含 5 列，可以是任意數量的行。

我編寫了以下 CSS/HTML，當手風琴打開時顯示所有 4 列數據（即騎師姓名和騎行次數）。 注意：這些元素中的每一個都將有一個關聯的表格顯示在 hover 上。

正如您將看到的，我設法在第一行的 hover 上顯示每個元素的關聯表，但是，我無法對剩余行和列中的任何后續元素執行相同操作。

注意：出於測試目的，我有意在懸停時將每個元素的突出顯示為“紅色”。

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

 .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; }

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

如果我嘗試將相同的代碼添加到 DIV(s) 列中的后續元素（即當前包含在段落標記中的元素，應該是第 2 行、第 3 行等等......，我失去列結構和格式，並且定義的href全部未對齊並且部分或完全隱藏，直到懸停。

注意：騎師姓名應按字母順序從左到右出現。

另外但不如上述重要的是，顯示的表格似乎受限於列的寬度。 當我嘗試擴大寬度時，表格的右側被下一列隱藏（表格位於其右側的列后面）。 我還想知道是否有辦法解決這個問題並在附加列的“頂部”（上方）顯示表格，以便我可以擴大寬度。

為 HTML 的長度道歉，但我認為你需要看看發生了什么。

Answer 1

1. 一個 id 不能在一個頁面上多次使用。 所以我用class替換了它們。 （ #jockeys -> .jockeys ， #ShowJockey -> .ShowJockey ）

2. 您不能將div放在p標簽中。 所以我們必須用div替換p標簽。

簡而言之，不可能在 DOM 中的<p>中放置<div>元素，因為打開的<div>標簽會自動關閉<p>元素。 ^參考

我做了一個片段。

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

 .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; }

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

同樣在這里，我用一種更好的方法展示了表格。 但是您必須為您的表格提供data-hover-content屬性。 請參閱 1. 和 6. 鏈接。

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

 .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; }

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

我壓縮了表格的代碼，因為 Stackoverflow 片段不允許太多代碼。

這是另一個例子。 （我認為最好）這適用於點擊。

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

 /* 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}

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

Answer 2

讓我修改您的要求，您將創建一個包含 X 行和 Y 列的表格，懸停在您需要顯示另一個表格的任何單元格上嗎？

首先，我建議您可以用 go 代替表格，而不是表格，以使用 'flex' 或 'grid' 以便在比表格更短的時間內創建 DOM。

現在考慮一個帶有 X 行和 Y 列的表格，您可以為每個單元格設置 onmouseover 事件。 <td onmouseover=showAssociatedTable(cellId)>

function showAssociatedTable(cellId) {
//這里可以append關聯表或者
//您可以為關聯表切換 css 顯示：“無”或“塊”
}

Answer 3

我想我已經找到了另一種可能的解決方案來解決您的問題。 有了這個解決方案，與其他也很好的答案相反，沒有單獨的“懸停我”或“點擊我”按鈕。 只需 hover 在一個單元格上查看相關表格。

我已經清理並更改了您的 html 代碼以使其成為<table> 。 它帶來了很多好處，例如漂亮而干凈的結構。

Now, each individual data cell in the .overall table has an attribute onmouseover="showDetail(this.id)" so that, when you hover over the element it fires that function and passes the id ( Jockey-# ) to the function showDetail .

這個 function 首先將所有其他單元格的不透明度設置為0.3 ，以使.hoverPopUp在背景中更加突出。 接下來，懸停單元格的不透明度設置為1 。 以便用戶知道該表是關於什么的。

然后計算單元格本身的 x 和 y position 以設置所選單元格下方的 detailTable 的detailTable 。

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

 .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; }

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

順便說一句，你從哪里得到這些數據？ 如果它是 api 或其他東西，我強烈建議您在頁面加載時使用代碼創建表。 這將為您節省大量時間。

希望對你有幫助，如果沒有，請評論

編輯

我現在已經使standardTable表相對。 此外，每個面板現在都有一個panel的 class 和一個panel-#的 ID，而不是.panel5 ，以便識別它們。 我假設每個面板中的每個騎師都是獨一無二的，如果不是這種情況，我可能不得不重寫一些位。 還向詳細信息表添加了box-shadow和z-index以使它們更加可見。

希望這可以幫助！