jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style 年份列按鈕與hover

Browse Source
This commit is contained in:
jekkinoopy
2026-05-17 13:27:22 +08:00
parent d52fbc0af5
commit ecf8c3d255
2 changed files with 461 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/sticker/magnific_black-cat-sits-close-besi_2052525917.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 MiB

variety/variety-shows.html
+460 -308
View File
@@ -46,7 +46,7 @@
transform: translateY(-2px); transform: translateY(-2px);
} }
body.variety-shows-page .variety-wiki-table-wrap { body.variety-shows-page .variety-table-wrap {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@@ -56,7 +56,7 @@
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
} }
body.variety-shows-page .variety-wiki-table { body.variety-shows-page .variety-table {
width: 100%; width: 100%;
min-width: 640px; min-width: 640px;
margin: 0; margin: 0;
@@ -68,7 +68,7 @@
line-height: 1.45; line-height: 1.45;
} }
body.variety-shows-page .variety-wiki-table thead th { body.variety-shows-page .variety-table thead th {
background: #fff9e0; background: #fff9e0;
color: #303030; color: #303030;
font-weight: 700; font-weight: 700;
@@ -79,7 +79,7 @@
white-space: nowrap; white-space: nowrap;
} }
body.variety-shows-page .variety-wiki-table tbody td { body.variety-shows-page .variety-table tbody td {
padding: 8px 10px; padding: 8px 10px;
border: 1px solid #d8d8d8; border: 1px solid #d8d8d8;
text-align: center; text-align: center;
@@ -87,28 +87,40 @@
color: #303030; color: #303030;
} }
body.variety-shows-page .variety-wiki-table--inner tbody tr:nth-child(even) td { body.variety-shows-page .variety-table__show-row:nth-child(even) td {
background: #fafafa; background: #fafafa;
} }
body.variety-shows-page .variety-wiki-table__year-row > td { body.variety-shows-page .variety-table__year-row>td {
padding: 0; padding: 0;
text-align: left; text-align: left;
vertical-align: top; vertical-align: middle;
background: #fff9e0;
transition: background-color 0.15s ease;
} }
body.variety-shows-page .variety-wiki-table__year-row:nth-child(even) > td { body.variety-shows-page .variety-table__year-row .variety-table__year-cell {
background: #fffdf5; padding: 0;
background: #fff9e0;
} }
body.variety-shows-page .variety-wiki-table__year-toggle { body.variety-shows-page .variety-table__year-pad {
padding: 0;
background: #fff9e0;
border-left: none;
}
body.variety-shows-page .variety-table__year-toggle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
min-height: 44px;
margin: 0;
padding: 12px 14px; padding: 12px 14px;
border: none; border: none;
border-radius: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
@@ -117,76 +129,75 @@
box-sizing: border-box; box-sizing: border-box;
} }
body.variety-shows-page .variety-wiki-table__year-toggle:hover, body.variety-shows-page .variety-table__year-row:not(.is-open)>td:has(.variety-table__year-toggle:hover),
body.variety-shows-page .variety-wiki-table__year-toggle:focus-visible { body.variety-shows-page .variety-table__year-row:not(.is-open)>td:has(.variety-table__year-toggle:focus-visible) {
background: rgba(255, 204, 0, 0.12); background: #fff6eb;
}
body.variety-shows-page .variety-table__year-row.is-open .variety-table__year-toggle:hover,
body.variety-shows-page .variety-table__year-row.is-open .variety-table__year-toggle:focus-visible {
background: #fff6eb;
outline: none; outline: none;
} }
body.variety-shows-page .variety-wiki-table__year-label { body.variety-shows-page .variety-table__year-toggle:focus-visible {
outline: none;
}
body.variety-shows-page .variety-table__year-label {
font-weight: 700; font-weight: 700;
font-size: 1.05rem; font-size: 1.05rem;
color: #5a4a12; color: #5a4a12;
} }
body.variety-shows-page .variety-wiki-table__year-meta { body.variety-shows-page .variety-table__year-meta {
margin-left: auto; margin-left: auto;
font-size: 0.82rem; font-size: 0.82rem;
color: #6a6a6a; color: #6a6a6a;
} }
body.variety-shows-page .variety-wiki-table__year-chevron { body.variety-shows-page .variety-table__year-chevron {
color: #b48c00; color: #b48c00;
font-size: 0.9rem; font-size: 0.9rem;
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
body.variety-shows-page .variety-wiki-table__year-row.is-open .variety-wiki-table__year-chevron { body.variety-shows-page .variety-table__year-row.is-open .variety-table__year-chevron {
transform: rotate(180deg); transform: rotate(180deg);
} }
body.variety-shows-page .variety-wiki-table__year-panel { body.variety-shows-page .variety-table__show-row[hidden] {
padding: 0 10px 12px;
border-top: 1px solid #ececec;
}
body.variety-shows-page .variety-wiki-table__year-panel[hidden] {
display: none; display: none;
} }
body.variety-shows-page .variety-wiki-table--inner { body.variety-shows-page .variety-table .variety-table__program {
margin-top: 8px;
min-width: 0;
}
body.variety-shows-page .variety-wiki-table .variety-wiki-table__program {
font-weight: 600; font-weight: 600;
} }
body.variety-shows-page .variety-wiki-table a { body.variety-shows-page .variety-table a {
color: #0645ad; color: #0645ad;
text-decoration: none; text-decoration: none;
} }
body.variety-shows-page .variety-wiki-table a:hover, body.variety-shows-page .variety-table a:hover,
body.variety-shows-page .variety-wiki-table a:focus-visible { body.variety-shows-page .variety-table a:focus-visible {
text-decoration: underline; text-decoration: underline;
} }
body.variety-shows-page .variety-wiki-table a.variety-wiki-table__link--site { body.variety-shows-page .variety-table a.variety-table__link--site {
color: #5a4a12; color: #5a4a12;
font-weight: 600; font-weight: 600;
} }
body.variety-shows-page .variety-wiki-table .variety-wiki-table__date { body.variety-shows-page .variety-table .variety-table__date {
color: #303030; color: #303030;
} }
body.variety-shows-page .variety-wiki-table__air-date { body.variety-shows-page .variety-table__air-date {
white-space: nowrap; white-space: nowrap;
} }
body.variety-shows-page .variety-wiki-table .variety-wiki-table__range-arrow { body.variety-shows-page .variety-table .variety-table__range-arrow {
margin: 0 0.18em; margin: 0 0.18em;
color: #303030; color: #303030;
font-size: 0.82em; font-size: 0.82em;
@@ -231,12 +242,12 @@
} }
@media (max-width: 720px) { @media (max-width: 720px) {
body.variety-shows-page .variety-wiki-table { body.variety-shows-page .variety-table {
font-size: 0.8rem; font-size: 0.8rem;
} }
body.variety-shows-page .variety-wiki-table thead th, body.variety-shows-page .variety-table thead th,
body.variety-shows-page .variety-wiki-table tbody td { body.variety-shows-page .variety-table tbody td {
padding: 7px 6px; padding: 7px 6px;
} }
} }
@@ -276,269 +287,410 @@
<div id="variety-shows-panels" class="variety-shows-panels"> <div id="variety-shows-panels" class="variety-shows-panels">
<div class="variety-shows-table-slot" id="captain-brothers" data-show-tabs="all captain"> <div class="variety-shows-table-slot" id="captain-brothers" data-show-tabs="all captain">
<div class="variety-wiki-table-wrap"> <div class="variety-table-wrap">
<table class="variety-wiki-table" id="variety-captain-table"> <table class="variety-table" id="variety-captain-table">
<thead> <thead>
<tr> <tr>
<th scope="col">播出日期</th> <th scope="col">播出日期</th>
<th scope="col">頻道</th> <th scope="col">頻道</th>
<th scope="col">節目名稱</th> <th scope="col">節目名稱</th>
<th scope="col">出演成員</th> <th scope="col">出演成員</th>
<th scope="col">集數</th> <th scope="col">集數</th>
</tr> </tr>
</thead> </thead>
<tbody class="variety-wiki-table__year-list"> <tbody class="variety-table__year-list">
<tr class="variety-wiki-table__year-row" data-year="2016"> <tr class="variety-table__year-row" data-year="2016">
<td colspan="5"> <td colspan="5">
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false" <button type="button" class="variety-table__year-toggle" aria-expanded="false"
aria-controls="captain-year-2016" id="captain-year-2016-btn"> aria-controls="captain-year-2016" id="captain-year-2016-btn">
<span class="variety-wiki-table__year-label">2016</span> <span class="variety-table__year-label">2016</span>
<span class="variety-wiki-table__year-meta">6 檔</span> <span class="variety-table__year-meta">6 檔</span>
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron" <i class="fa-solid fa-chevron-down variety-table__year-chevron"
aria-hidden="true"></i> aria-hidden="true"></i>
</button> </button>
<div id="captain-year-2016" class="variety-wiki-table__year-panel" hidden> <div id="captain-year-2016" class="variety-table__year-panel" hidden>
<table class="variety-wiki-table variety-wiki-table--inner"> <table class="variety-table variety-table--inner">
<tbody> <tbody>
<tr> <tr>
<td class="variety-wiki-table__air-date" data-air-start="2016-04-22" data-air-end="2016-06-17"><span class="variety-wiki-table__date">04/22</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">06/17</span></td> <td class="variety-table__air-date" data-air-start="2016-04-22"
<td>tvN</td> data-air-end="2016-06-17"><span
<td class="variety-wiki-table__program">新西遊記2</td> class="variety-table__date">04/22</span>&nbsp;<i
<td>殷志源</td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;09</td> aria-hidden="true"></i>&nbsp;<span
</tr> class="variety-table__date">06/17</span></td>
<tr> <td>tvN</td>
<td class="variety-wiki-table__air-date" data-air-start="2016-04-27" data-air-end="2016-06-22"><span class="variety-wiki-table__date">04/27</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">06/22</span></td> <td class="variety-table__program">新西遊記2</td>
<td>tvN</td> <td>殷志源</td>
<td class="variety-wiki-table__program">Let's GO 時間探險隊3</td> <td>01&nbsp;<i
<td>張水院</td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;09</td> aria-hidden="true"></i>&nbsp;09</td>
</tr> </tr>
<tr> <tr>
<td class="variety-wiki-table__air-date" data-air-start="2016-05-04" data-air-end="2016-07-20"><span class="variety-wiki-table__date">05/04</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">07/20</span></td> <td class="variety-table__air-date" data-air-start="2016-04-27"
<td>K-Star</td> data-air-end="2016-06-22"><span
<td class="variety-wiki-table__program">真實的帥氣的</td> class="variety-table__date">04/27</span>&nbsp;<i
<td>—</td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;12</td> aria-hidden="true"></i>&nbsp;<span
</tr> class="variety-table__date">06/22</span></td>
<tr> <td>tvN</td>
<td class="variety-wiki-table__air-date" data-air-start="2016-06-05" data-air-end="2016-08-21"><span class="variety-wiki-table__date">06/05</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">08/21</span></td> <td class="variety-table__program">Let's GO 時間探險隊3</td>
<td>JTBC</td> <td>張水院</td>
<td class="variety-wiki-table__program">天下壯士</td> <td>01&nbsp;<i
<td>殷志源</td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;12</td> aria-hidden="true"></i>&nbsp;09</td>
</tr> </tr>
<tr> <tr>
<td class="variety-wiki-table__air-date" data-air-start="2016-09-05" data-air-end="2016-11-21"><span class="variety-wiki-table__date">09/05</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">11/21</span></td> <td class="variety-table__air-date" data-air-start="2016-05-04"
<td>SBS</td> data-air-end="2016-07-20"><span
<td class="variety-wiki-table__program">花樣旅行</td> class="variety-table__date">05/04</span>&nbsp;<i
<td>殷志源、李宰鎮</td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;12</td> aria-hidden="true"></i>&nbsp;<span
</tr> class="variety-table__date">07/20</span></td>
<tr> <td>K-Star</td>
<td class="variety-wiki-table__air-date" data-air-start="2016-10-12" data-air-end="2016-10-21"><span class="variety-wiki-table__date">10/12</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">10/21</span></td> <td class="variety-table__program">真實的帥氣的</td>
<td>JTBC</td> <td>—</td>
<td class="variety-wiki-table__program">本月的活動王</td> <td>01&nbsp;<i
<td>張水院</td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;02</td> aria-hidden="true"></i>&nbsp;12</td>
</tr> </tr>
</tbody> <tr>
</table> <td class="variety-table__air-date" data-air-start="2016-06-05"
</div> data-air-end="2016-08-21"><span
</td> class="variety-table__date">06/05</span>&nbsp;<i
</tr> class="fa-solid fa-circle-right variety-table__range-arrow"
<tr class="variety-wiki-table__year-row" data-year="2017"> aria-hidden="true"></i>&nbsp;<span
<td colspan="5"> class="variety-table__date">08/21</span></td>
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false" <td>JTBC</td>
aria-controls="captain-year-2017" id="captain-year-2017-btn"> <td class="variety-table__program">天下壯士</td>
<span class="variety-wiki-table__year-label">2017</span> <td>殷志源</td>
<span class="variety-wiki-table__year-meta">4 檔</span> <td>01&nbsp;<i
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i> aria-hidden="true"></i>&nbsp;12</td>
</button> </tr>
<div id="captain-year-2017" class="variety-wiki-table__year-panel" hidden> <tr>
<table class="variety-wiki-table variety-wiki-table--inner"> <td class="variety-table__air-date" data-air-start="2016-09-05"
<tbody> data-air-end="2016-11-21"><span
<tr> class="variety-table__date">09/05</span>&nbsp;<i
<td class="variety-wiki-table__air-date" data-air-start="2017-01-01" data-air-end="2019-06-02"><span class="variety-wiki-table__date">01/01</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">19/06/02</span></td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>KBS2</td> aria-hidden="true"></i>&nbsp;<span
<td class="variety-wiki-table__program">超人回來了</td> class="variety-table__date">11/21</span></td>
<td>高志鎔</td> <td>SBS</td>
<td>163&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;280</td> <td class="variety-table__program">花樣旅行</td>
</tr> <td>殷志源、李宰鎮</td>
<tr> <td>01&nbsp;<i
<td class="variety-wiki-table__air-date" data-air-start="2017-01-08" data-air-end="2017-03-12"><span class="variety-wiki-table__date">01/08</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">03/12</span></td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>tvN</td> aria-hidden="true"></i>&nbsp;12</td>
<td class="variety-wiki-table__program">新西遊記3</td> </tr>
<td>殷志源</td> <tr>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;09＋導演版</td> <td class="variety-table__air-date" data-air-start="2016-10-12"
</tr> data-air-end="2016-10-21"><span
<tr> class="variety-table__date">10/12</span>&nbsp;<i
<td class="variety-wiki-table__air-date" data-air-start="2017-06-13" data-air-end="2017-08-22"><span class="variety-wiki-table__date">06/13</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">08/22</span></td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>tvN</td> aria-hidden="true"></i>&nbsp;<span
<td class="variety-wiki-table__program">新西遊記4</td> class="variety-table__date">10/21</span></td>
<td>殷志源</td> <td>JTBC</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;10＋導演版</td> <td class="variety-table__program">本月的活動王</td>
</tr> <td>張水院</td>
<tr> <td>01&nbsp;<i
<td class="variety-wiki-table__air-date" data-air-start="2017-12-05" data-air-end="2018-01-09"><span class="variety-wiki-table__date">12/05</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">18/01/09</span></td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>tvN</td> aria-hidden="true"></i>&nbsp;02</td>
<td class="variety-wiki-table__program">姜食堂</td> </tr>
<td>殷志源</td> </tbody>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;05＋導演版</td> </table>
</tr> </div>
</tbody> </td>
</table> </tr>
</div> <tr class="variety-table__year-row" data-year="2017">
</td> <td colspan="5">
</tr> <button type="button" class="variety-table__year-toggle" aria-expanded="false"
<tr class="variety-wiki-table__year-row" data-year="2018"> aria-controls="captain-year-2017" id="captain-year-2017-btn">
<td colspan="5"> <span class="variety-table__year-label">2017</span>
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false" <span class="variety-table__year-meta">4 檔</span>
aria-controls="captain-year-2018" id="captain-year-2018-btn"> <i class="fa-solid fa-chevron-down variety-table__year-chevron"
<span class="variety-wiki-table__year-label">2018</span> aria-hidden="true"></i>
<span class="variety-wiki-table__year-meta">3 檔</span> </button>
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron" <div id="captain-year-2017" class="variety-table__year-panel" hidden>
aria-hidden="true"></i> <table class="variety-table variety-table--inner">
</button> <tbody>
<div id="captain-year-2018" class="variety-wiki-table__year-panel" hidden> <tr>
<table class="variety-wiki-table variety-wiki-table--inner"> <td class="variety-table__air-date" data-air-start="2017-01-01"
<tbody> data-air-end="2019-06-02"><span
<tr> class="variety-table__date">01/01</span>&nbsp;<i
<td class="variety-wiki-table__air-date" data-air-start="2018-05-05" data-air-end="2018-10-27"><span class="variety-wiki-table__date">05/05</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">10/27</span></td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>MBC</td> aria-hidden="true"></i>&nbsp;<span
<td class="variety-wiki-table__program">意外的Q</td> class="variety-table__date">19/06/02</span></td>
<td>—</td> <td>KBS2</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;25</td> <td class="variety-table__program">超人回來了</td>
</tr> <td>高志鎔</td>
<tr> <td>163&nbsp;<i
<td class="variety-wiki-table__air-date" data-air-start="2018-09-30" data-air-end="2018-10-28"><span class="variety-wiki-table__date">09/30</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">10/28</span></td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>tvN</td> aria-hidden="true"></i>&nbsp;280</td>
<td class="variety-wiki-table__program"><a class="variety-wiki-table__link--site" </tr>
href="NJTW/NJTW5.html">新西遊記5</a></td> <tr>
<td>殷志源</td> <td class="variety-table__air-date" data-air-start="2017-01-08"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;05</td> data-air-end="2017-03-12"><span
</tr> class="variety-table__date">01/08</span>&nbsp;<i
<tr> class="fa-solid fa-circle-right variety-table__range-arrow"
<td class="variety-wiki-table__air-date" data-air-start="2018-10-28" data-air-end="2018-12-02"><span class="variety-wiki-table__date">10/28</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">12/02</span></td> aria-hidden="true"></i>&nbsp;<span
<td>tvN</td> class="variety-table__date">03/12</span></td>
<td class="variety-wiki-table__program">新西遊記6</td> <td>tvN</td>
<td>殷志源</td> <td class="variety-table__program">新西遊記3</td>
<td>00&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;05＋導演版</td> <td>殷志源</td>
</tr> <td>01&nbsp;<i
</tbody> class="fa-solid fa-circle-right variety-table__range-arrow"
</table> aria-hidden="true"></i>&nbsp;09＋導演版</td>
</div> </tr>
</td> <tr>
</tr> <td class="variety-table__air-date" data-air-start="2017-06-13"
<tr class="variety-wiki-table__year-row" data-year="2019"> data-air-end="2017-08-22"><span
<td colspan="5"> class="variety-table__date">06/13</span>&nbsp;<i
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-controls="captain-year-2019" id="captain-year-2019-btn"> aria-hidden="true"></i>&nbsp;<span
<span class="variety-wiki-table__year-label">2019</span> class="variety-table__date">08/22</span></td>
<span class="variety-wiki-table__year-meta">5 檔</span> <td>tvN</td>
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron" <td class="variety-table__program">新西遊記4</td>
aria-hidden="true"></i> <td>殷志源</td>
</button> <td>01&nbsp;<i
<div id="captain-year-2019" class="variety-wiki-table__year-panel" hidden> class="fa-solid fa-circle-right variety-table__range-arrow"
<table class="variety-wiki-table variety-wiki-table--inner"> aria-hidden="true"></i>&nbsp;10＋導演版</td>
<tbody> </tr>
<tr> <tr>
<td class="variety-wiki-table__air-date" data-air-start="2019-05-31" data-air-end="2019-07-05"><span class="variety-wiki-table__date">05/31</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">07/05</span></td> <td class="variety-table__air-date" data-air-start="2017-12-05"
<td>tvN</td> data-air-end="2018-01-09"><span
<td class="variety-wiki-table__program">姜食堂2</td> class="variety-table__date">12/05</span>&nbsp;<i
<td>殷志源</td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;06</td> aria-hidden="true"></i>&nbsp;<span
</tr> class="variety-table__date">18/01/09</span></td>
<tr> <td>tvN</td>
<td class="variety-wiki-table__air-date" data-air-start="2019-06-08" data-air-end="2019-08-17"><span class="variety-wiki-table__date">06/08</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">08/17</span></td> <td class="variety-table__program">姜食堂</td>
<td>tvN</td> <td>殷志源</td>
<td class="variety-wiki-table__program">高校供餐王</td> <td>01&nbsp;<i
<td>殷志源</td> class="fa-solid fa-circle-right variety-table__range-arrow"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;11</td> aria-hidden="true"></i>&nbsp;05＋導演版</td>
</tr> </tr>
<tr> </tbody>
<td class="variety-wiki-table__air-date" data-air-start="2019-07-05" data-air-end="2019-08-02"><span class="variety-wiki-table__date">07/05</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">08/02</span></td> </table>
<td>tvN</td> </div>
<td class="variety-wiki-table__program">姜食堂3</td> </td>
<td>殷志源</td> </tr>
<td>00&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;04</td> <tr class="variety-table__year-row" data-year="2018">
</tr> <td colspan="5">
<tr> <button type="button" class="variety-table__year-toggle" aria-expanded="false"
<td class="variety-wiki-table__air-date" data-air-start="2019-09-20" data-air-end="2019-11-22"><span class="variety-wiki-table__date">09/20</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">11/22</span></td> aria-controls="captain-year-2018" id="captain-year-2018-btn">
<td>tvN</td> <span class="variety-table__year-label">2018</span>
<td class="variety-wiki-table__program">去冰島的三餐</td> <span class="variety-table__year-meta">3 檔</span>
<td>殷志源</td> <i class="fa-solid fa-chevron-down variety-table__year-chevron"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;10</td> aria-hidden="true"></i>
</tr> </button>
<tr> <div id="captain-year-2018" class="variety-table__year-panel" hidden>
<td class="variety-wiki-table__air-date" data-air-start="2019-10-25" data-air-end="2020-01-03"><span class="variety-wiki-table__date">10/25</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">20/01/03</span></td> <table class="variety-table variety-table--inner">
<td>tvN</td> <tbody>
<td class="variety-wiki-table__program">新西遊記7</td> <tr>
<td>殷志源</td> <td class="variety-table__air-date" data-air-start="2018-05-05"
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;11</td> data-air-end="2018-10-27"><span
</tr> class="variety-table__date">05/05</span>&nbsp;<i
</tbody> class="fa-solid fa-circle-right variety-table__range-arrow"
</table> aria-hidden="true"></i>&nbsp;<span
</div> class="variety-table__date">10/27</span></td>
</td> <td>MBC</td>
</tr> <td class="variety-table__program">意外的Q</td>
<tr class="variety-wiki-table__year-row" data-year="2020"> <td>—</td>
<td colspan="5"> <td>01&nbsp;<i
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false" class="fa-solid fa-circle-right variety-table__range-arrow"
aria-controls="captain-year-2020" id="captain-year-2020-btn"> aria-hidden="true"></i>&nbsp;25</td>
<span class="variety-wiki-table__year-label">2020</span> </tr>
<span class="variety-wiki-table__year-meta">2 檔</span> <tr>
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron" <td class="variety-table__air-date" data-air-start="2018-09-30"
aria-hidden="true"></i> data-air-end="2018-10-28"><span
</button> class="variety-table__date">09/30</span>&nbsp;<i
<div id="captain-year-2020" class="variety-wiki-table__year-panel" hidden> class="fa-solid fa-circle-right variety-table__range-arrow"
<table class="variety-wiki-table variety-wiki-table--inner"> aria-hidden="true"></i>&nbsp;<span
<tbody> class="variety-table__date">10/28</span></td>
<tr> <td>tvN</td>
<td class="variety-wiki-table__air-date" data-air-start="2020-01-10" data-air-end="2020-03-27"><span class="variety-wiki-table__date">01/10</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">03/27</span></td> <td class="variety-table__program"><a
<td>tvN</td> class="variety-table__link--site"
<td class="variety-wiki-table__program">星期五星期五晚上</td> href="NJTW/NJTW5.html">新西遊記5</a></td>
<td>殷志源</td> <td>殷志源</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;10＋導演版</td> <td>01&nbsp;<i
</tr> class="fa-solid fa-circle-right variety-table__range-arrow"
<tr> aria-hidden="true"></i>&nbsp;05</td>
<td class="variety-wiki-table__air-date" data-air-start="2020-10-09" data-air-end="2020-12-18"><span class="variety-wiki-table__date">10/09</span>&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;<span class="variety-wiki-table__date">12/18</span></td> </tr>
<td>tvN</td> <tr>
<td class="variety-wiki-table__program">新西遊記8</td> <td class="variety-table__air-date" data-air-start="2018-10-28"
<td>殷志源</td> data-air-end="2018-12-02"><span
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;10＋導演版</td> class="variety-table__date">10/28</span>&nbsp;<i
</tr> class="fa-solid fa-circle-right variety-table__range-arrow"
</tbody> aria-hidden="true"></i>&nbsp;<span
</table> class="variety-table__date">12/02</span></td>
</div> <td>tvN</td>
</td> <td class="variety-table__program">新西遊記6</td>
</tr> <td>殷志源</td>
</tbody> <td>00&nbsp;<i
</table> class="fa-solid fa-circle-right variety-table__range-arrow"
</div> aria-hidden="true"></i>&nbsp;05＋導演版</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2019">
<td colspan="5">
<button type="button" class="variety-table__year-toggle" aria-expanded="false"
aria-controls="captain-year-2019" id="captain-year-2019-btn">
<span class="variety-table__year-label">2019</span>
<span class="variety-table__year-meta">5 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron"
aria-hidden="true"></i>
</button>
<div id="captain-year-2019" class="variety-table__year-panel" hidden>
<table class="variety-table variety-table--inner">
<tbody>
<tr>
<td class="variety-table__air-date" data-air-start="2019-05-31"
data-air-end="2019-07-05"><span
class="variety-table__date">05/31</span>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">07/05</span></td>
<td>tvN</td>
<td class="variety-table__program">姜食堂2</td>
<td>殷志源</td>
<td>01&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;06</td>
</tr>
<tr>
<td class="variety-table__air-date" data-air-start="2019-06-08"
data-air-end="2019-08-17"><span
class="variety-table__date">06/08</span>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">08/17</span></td>
<td>tvN</td>
<td class="variety-table__program">高校供餐王</td>
<td>殷志源</td>
<td>01&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;11</td>
</tr>
<tr>
<td class="variety-table__air-date" data-air-start="2019-07-05"
data-air-end="2019-08-02"><span
class="variety-table__date">07/05</span>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">08/02</span></td>
<td>tvN</td>
<td class="variety-table__program">姜食堂3</td>
<td>殷志源</td>
<td>00&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;04</td>
</tr>
<tr>
<td class="variety-table__air-date" data-air-start="2019-09-20"
data-air-end="2019-11-22"><span
class="variety-table__date">09/20</span>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">11/22</span></td>
<td>tvN</td>
<td class="variety-table__program">去冰島的三餐</td>
<td>殷志源</td>
<td>01&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;10</td>
</tr>
<tr>
<td class="variety-table__air-date" data-air-start="2019-10-25"
data-air-end="2020-01-03"><span
class="variety-table__date">10/25</span>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">20/01/03</span></td>
<td>tvN</td>
<td class="variety-table__program">新西遊記7</td>
<td>殷志源</td>
<td>01&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;11</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2020">
<td colspan="5">
<button type="button" class="variety-table__year-toggle" aria-expanded="false"
aria-controls="captain-year-2020" id="captain-year-2020-btn">
<span class="variety-table__year-label">2020</span>
<span class="variety-table__year-meta">2 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron"
aria-hidden="true"></i>
</button>
<div id="captain-year-2020" class="variety-table__year-panel" hidden>
<table class="variety-table variety-table--inner">
<tbody>
<tr>
<td class="variety-table__air-date" data-air-start="2020-01-10"
data-air-end="2020-03-27"><span
class="variety-table__date">01/10</span>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">03/27</span></td>
<td>tvN</td>
<td class="variety-table__program">星期五星期五晚上</td>
<td>殷志源</td>
<td>01&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;10＋導演版</td>
</tr>
<tr>
<td class="variety-table__air-date" data-air-start="2020-10-09"
data-air-end="2020-12-18"><span
class="variety-table__date">10/09</span>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">12/18</span></td>
<td>tvN</td>
<td class="variety-table__program">新西遊記8</td>
<td>殷志源</td>
<td>01&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;10＋導演版</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
<div class="variety-shows-table-slot" id="each-rampage" data-show-tabs="all solo"> <div class="variety-shows-table-slot" id="each-rampage" data-show-tabs="all solo">
<div class="variety-wiki-table-wrap"> <div class="variety-table-wrap">
<table class="variety-wiki-table" id="variety-solo-table"> <table class="variety-table" id="variety-solo-table">
<thead> <thead>
<tr> <tr>
<th scope="col">播出日期</th> <th scope="col">播出日期</th>
<th scope="col">頻道</th> <th scope="col">頻道</th>
<th scope="col">節目名稱</th> <th scope="col">節目名稱</th>
<th scope="col">出演成員</th> <th scope="col">出演成員</th>
<th scope="col">集數</th> <th scope="col">集數</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td colspan="5">陸續補上；站內專頁例：<a class="variety-wiki-table__link--site" <td colspan="5">陸續補上；站內專頁例：<a class="variety-table__link--site"
href="NJTW/NJTW5.html">新西遊記5</a></td> href="NJTW/NJTW5.html">新西遊記5</a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
@@ -572,8 +724,8 @@
} }
function setYearOpen(yearRow, open) { function setYearOpen(yearRow, open) {
const btn = yearRow.querySelector(".variety-wiki-table__year-toggle"); const btn = yearRow.querySelector(".variety-table__year-toggle");
const panel = yearRow.querySelector(".variety-wiki-table__year-panel"); const panel = yearRow.querySelector(".variety-table__year-panel");
if (!btn || !panel) return; if (!btn || !panel) return;
btn.setAttribute("aria-expanded", open ? "true" : "false"); btn.setAttribute("aria-expanded", open ? "true" : "false");
panel.hidden = !open; panel.hidden = !open;
@@ -584,13 +736,13 @@
const q = (input && input.value.trim().toLowerCase()) || ""; const q = (input && input.value.trim().toLowerCase()) || "";
slots.forEach((slot) => { slots.forEach((slot) => {
if (slot.hidden) return; if (slot.hidden) return;
slot.querySelectorAll(".variety-wiki-table__year-row").forEach((yearRow) => { slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => {
const detailRows = yearRow.querySelectorAll( const detailRows = yearRow.querySelectorAll(
".variety-wiki-table--inner tbody tr" ".variety-table--inner tbody tr"
); );
let anyMatch = false; let anyMatch = false;
detailRows.forEach((row) => { detailRows.forEach((row) => {
const air = row.querySelector(".variety-wiki-table__air-date"); const air = row.querySelector(".variety-table__air-date");
const airData = air const airData = air
? `${air.dataset.airStart || ""} ${air.dataset.airEnd || ""}` ? `${air.dataset.airStart || ""} ${air.dataset.airEnd || ""}`
: ""; : "";
@@ -608,9 +760,9 @@
}); });
} }
document.querySelectorAll(".variety-wiki-table__year-toggle").forEach((btn) => { document.querySelectorAll(".variety-table__year-toggle").forEach((btn) => {
btn.addEventListener("click", () => { btn.addEventListener("click", () => {
const yearRow = btn.closest(".variety-wiki-table__year-row"); const yearRow = btn.closest(".variety-table__year-row");
const open = btn.getAttribute("aria-expanded") !== "true"; const open = btn.getAttribute("aria-expanded") !== "true";
setYearOpen(yearRow, open); setYearOpen(yearRow, open);
}); });
@@ -637,8 +789,8 @@
tab === "captain" tab === "captain"
? "#captain-brothers" ? "#captain-brothers"
: tab === "solo" : tab === "solo"
? "#each-rampage" ? "#each-rampage"
: ""; : "";
history.replaceState( history.replaceState(
null, null,
"", "",