feat 綜藝表按年展開

This commit is contained in:
2026-05-17 03:42:08 +08:00
parent e415d69315
commit 73b00a6d43
+251 -64
View File
@@ -87,10 +87,78 @@
color: #303030;
}
body.variety-shows-page .variety-wiki-table tbody tr:nth-child(even) td {
body.variety-shows-page .variety-wiki-table--inner tbody tr:nth-child(even) td {
background: #fafafa;
}
body.variety-shows-page .variety-wiki-table__year-row > td {
padding: 0;
text-align: left;
vertical-align: top;
}
body.variety-shows-page .variety-wiki-table__year-row:nth-child(even) > td {
background: #fffdf5;
}
body.variety-shows-page .variety-wiki-table__year-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 12px 14px;
border: none;
background: transparent;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
box-sizing: border-box;
}
body.variety-shows-page .variety-wiki-table__year-toggle:hover,
body.variety-shows-page .variety-wiki-table__year-toggle:focus-visible {
background: rgba(255, 204, 0, 0.12);
outline: none;
}
body.variety-shows-page .variety-wiki-table__year-label {
font-weight: 700;
font-size: 1.05rem;
color: #5a4a12;
}
body.variety-shows-page .variety-wiki-table__year-meta {
margin-left: auto;
font-size: 0.82rem;
color: #6a6a6a;
}
body.variety-shows-page .variety-wiki-table__year-chevron {
color: #b48c00;
font-size: 0.9rem;
transition: transform 0.2s ease;
}
body.variety-shows-page .variety-wiki-table__year-row.is-open .variety-wiki-table__year-chevron {
transform: rotate(180deg);
}
body.variety-shows-page .variety-wiki-table__year-panel {
padding: 0 10px 12px;
border-top: 1px solid #ececec;
}
body.variety-shows-page .variety-wiki-table__year-panel[hidden] {
display: none;
}
body.variety-shows-page .variety-wiki-table--inner {
margin-top: 8px;
min-width: 0;
}
body.variety-shows-page .variety-wiki-table .variety-wiki-table__program {
font-weight: 600;
}
@@ -110,15 +178,15 @@
font-weight: 600;
}
body.variety-shows-page .variety-wiki-table .arrow-icon.variety-wiki-table__range-arrow {
display: inline-block;
transform: rotate(90deg);
margin: 0 0.2em;
vertical-align: middle;
font-size: 0.85em;
line-height: 1;
color: var(--primary);
font-style: normal;
body.variety-shows-page .variety-wiki-table .variety-wiki-table__date {
color: #303030;
}
body.variety-shows-page .variety-wiki-table .variety-wiki-table__range-arrow {
margin: 0 0.18em;
color: #303030;
font-size: 0.82em;
vertical-align: 0.08em;
}
body.variety-shows-page .variety-shows-note {
@@ -215,140 +283,232 @@
<th scope="col">集數</th>
</tr>
</thead>
<tbody class="variety-wiki-table__year-list">
<tr class="variety-wiki-table__year-row" data-year="2016">
<td colspan="5">
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false"
aria-controls="captain-year-2016" id="captain-year-2016-btn">
<span class="variety-wiki-table__year-label">2016</span>
<span class="variety-wiki-table__year-meta">6 檔</span>
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron"
aria-hidden="true"></i>
</button>
<div id="captain-year-2016" class="variety-wiki-table__year-panel" hidden>
<table class="variety-wiki-table variety-wiki-table--inner">
<tbody>
<tr>
<td>16/04/22<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>16/06/17</td>
<td rowspan="2">tvN</td>
<td><span class="variety-wiki-table__date">16/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>tvN</td>
<td class="variety-wiki-table__program">新西遊記2</td>
<td>殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>09</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;09</td>
</tr>
<tr>
<td>16/04/27<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>16/06/22</td>
<td><span class="variety-wiki-table__date">16/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>tvN</td>
<td class="variety-wiki-table__program">Let's GO 時間探險隊3</td>
<td>張水院</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>09</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;09</td>
</tr>
<tr>
<td>16/05/04<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>16/07/20</td>
<td><span class="variety-wiki-table__date">16/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>K-Star</td>
<td class="variety-wiki-table__program">真實的帥氣的</td>
<td></td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>12</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;12</td>
</tr>
<tr>
<td>16/06/05<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>16/08/21</td>
<td><span class="variety-wiki-table__date">16/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>JTBC</td>
<td class="variety-wiki-table__program">天下壯士</td>
<td>殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>12</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;12</td>
</tr>
<tr>
<td>16/09/05<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>16/11/21</td>
<td><span class="variety-wiki-table__date">16/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>SBS</td>
<td class="variety-wiki-table__program">花樣旅行</td>
<td>殷志源、李宰鎮</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>12</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;12</td>
</tr>
<tr>
<td>16/10/12<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>16/10/21</td>
<td><span class="variety-wiki-table__date">16/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>JTBC</td>
<td class="variety-wiki-table__program">本月的活動王</td>
<td>張水院</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>02</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;02</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-wiki-table__year-row" data-year="2017">
<td colspan="5">
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false"
aria-controls="captain-year-2017" id="captain-year-2017-btn">
<span class="variety-wiki-table__year-label">2017</span>
<span class="variety-wiki-table__year-meta">4 檔</span>
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron"
aria-hidden="true"></i>
</button>
<div id="captain-year-2017" class="variety-wiki-table__year-panel" hidden>
<table class="variety-wiki-table variety-wiki-table--inner">
<tbody>
<tr>
<td>17/01/01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>19/06/02</td>
<td><span class="variety-wiki-table__date">17/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>
<td>KBS2</td>
<td class="variety-wiki-table__program">超人回來了</td>
<td>高志鎔</td>
<td>163<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>280</td>
<td>163&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;280</td>
</tr>
<tr>
<td>17/01/08<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>17/03/12</td>
<td rowspan="3">tvN</td>
<td><span class="variety-wiki-table__date">17/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>
<td>tvN</td>
<td class="variety-wiki-table__program">新西遊記3</td>
<td rowspan="3">殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>09+導演版</td>
<td>殷志源</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;09+導演版</td>
</tr>
<tr>
<td>17/06/13<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>17/08/22</td>
<td><span class="variety-wiki-table__date">17/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>
<td>tvN</td>
<td class="variety-wiki-table__program">新西遊記4</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>10+導演版</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>
</tr>
<tr>
<td>17/12/05<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>18/01/09</td>
<td><span class="variety-wiki-table__date">17/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>
<td>tvN</td>
<td class="variety-wiki-table__program">姜食堂</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>05+導演版</td>
<td>殷志源</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;05+導演版</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-wiki-table__year-row" data-year="2018">
<td colspan="5">
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false"
aria-controls="captain-year-2018" id="captain-year-2018-btn">
<span class="variety-wiki-table__year-label">2018</span>
<span class="variety-wiki-table__year-meta">3 檔</span>
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron"
aria-hidden="true"></i>
</button>
<div id="captain-year-2018" class="variety-wiki-table__year-panel" hidden>
<table class="variety-wiki-table variety-wiki-table--inner">
<tbody>
<tr>
<td>18/05/05<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>18/10/27</td>
<td><span class="variety-wiki-table__date">18/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>
<td>MBC</td>
<td class="variety-wiki-table__program">意外的Q</td>
<td></td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>25</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;25</td>
</tr>
<tr>
<td>18/09/30<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>18/10/28</td>
<td rowspan="2">tvN</td>
<td><span class="variety-wiki-table__date">18/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>
<td>tvN</td>
<td class="variety-wiki-table__program"><a class="variety-wiki-table__link--site"
href="NJTW/NJTW5.html">新西遊記5</a></td>
<td rowspan="2">殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>05</td>
</tr>
<tr>
<td>18/10/28<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>18/12/02</td>
<td class="variety-wiki-table__program">新西遊記6</td>
<td>00<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>05+導演版</td>
</tr>
<tr>
<td>19/10/25<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>20/01/03</td>
<td>tvN</td>
<td class="variety-wiki-table__program">新西遊記7</td>
<td>殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>11</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;05</td>
</tr>
<tr>
<td>19/05/31<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>19/07/05</td>
<td><span class="variety-wiki-table__date">18/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>
<td>tvN</td>
<td class="variety-wiki-table__program">新西遊記6</td>
<td>殷志源</td>
<td>00&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;05+導演版</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-wiki-table__year-row" data-year="2019">
<td colspan="5">
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false"
aria-controls="captain-year-2019" id="captain-year-2019-btn">
<span class="variety-wiki-table__year-label">2019</span>
<span class="variety-wiki-table__year-meta">5 檔</span>
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron"
aria-hidden="true"></i>
</button>
<div id="captain-year-2019" class="variety-wiki-table__year-panel" hidden>
<table class="variety-wiki-table variety-wiki-table--inner">
<tbody>
<tr>
<td><span class="variety-wiki-table__date">19/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>tvN</td>
<td class="variety-wiki-table__program">姜食堂2</td>
<td>殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>06</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;06</td>
</tr>
<tr>
<td>19/06/08<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>19/08/17</td>
<td><span class="variety-wiki-table__date">19/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>tvN</td>
<td class="variety-wiki-table__program">高校供餐王</td>
<td>殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>11</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;11</td>
</tr>
<tr>
<td>19/07/05<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>19/08/02</td>
<td><span class="variety-wiki-table__date">19/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>
<td>tvN</td>
<td class="variety-wiki-table__program">姜食堂3</td>
<td>殷志源</td>
<td>00<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>04</td>
<td>00&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;04</td>
</tr>
<tr>
<td>19/09/20<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>19/11/22</td>
<td><span class="variety-wiki-table__date">19/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>
<td>tvN</td>
<td class="variety-wiki-table__program">去冰島的三餐</td>
<td>殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>10</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;10</td>
</tr>
<tr>
<td>20/01/10<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>20/03/27</td>
<td><span class="variety-wiki-table__date">19/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>
<td>tvN</td>
<td class="variety-wiki-table__program">新西遊記7</td>
<td>殷志源</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;11</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="variety-wiki-table__year-row" data-year="2020">
<td colspan="5">
<button type="button" class="variety-wiki-table__year-toggle" aria-expanded="false"
aria-controls="captain-year-2020" id="captain-year-2020-btn">
<span class="variety-wiki-table__year-label">2020</span>
<span class="variety-wiki-table__year-meta">2 檔</span>
<i class="fa-solid fa-chevron-down variety-wiki-table__year-chevron"
aria-hidden="true"></i>
</button>
<div id="captain-year-2020" class="variety-wiki-table__year-panel" hidden>
<table class="variety-wiki-table variety-wiki-table--inner">
<tbody>
<tr>
<td><span class="variety-wiki-table__date">20/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>tvN</td>
<td class="variety-wiki-table__program">星期五星期五晚上</td>
<td>殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>10+導演版</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;10+導演版</td>
</tr>
<tr>
<td>20/10/09<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>20/12/18</td>
<td><span class="variety-wiki-table__date">20/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>
<td>tvN</td>
<td class="variety-wiki-table__program">新西遊記8</td>
<td>殷志源</td>
<td>01<span class="arrow-icon variety-wiki-table__range-arrow" aria-hidden="true"></span>10+導演版</td>
<td>01&nbsp;<i class="fa-solid fa-circle-right variety-wiki-table__range-arrow" aria-hidden="true"></i>&nbsp;10+導演版</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
@@ -407,17 +567,44 @@
return hashToTab[id] || "all";
}
function setYearOpen(yearRow, open) {
const btn = yearRow.querySelector(".variety-wiki-table__year-toggle");
const panel = yearRow.querySelector(".variety-wiki-table__year-panel");
if (!btn || !panel) return;
btn.setAttribute("aria-expanded", open ? "true" : "false");
panel.hidden = !open;
yearRow.classList.toggle("is-open", open);
}
function filterVisibleRows() {
const q = (input && input.value.trim().toLowerCase()) || "";
slots.forEach((slot) => {
if (slot.hidden) return;
slot.querySelectorAll("tbody tr").forEach((row) => {
slot.querySelectorAll(".variety-wiki-table__year-row").forEach((yearRow) => {
const detailRows = yearRow.querySelectorAll(
".variety-wiki-table--inner tbody tr"
);
let anyMatch = false;
detailRows.forEach((row) => {
const text = row.textContent.replace(/\s+/g, " ").trim().toLowerCase();
row.hidden = Boolean(q) && !text.includes(q);
const match = !q || text.includes(q);
row.hidden = !match;
if (match) anyMatch = true;
});
if (q && anyMatch) setYearOpen(yearRow, true);
yearRow.hidden = Boolean(q) && !anyMatch;
});
});
}
document.querySelectorAll(".variety-wiki-table__year-toggle").forEach((btn) => {
btn.addEventListener("click", () => {
const yearRow = btn.closest(".variety-wiki-table__year-row");
const open = btn.getAttribute("aria-expanded") !== "true";
setYearOpen(yearRow, open);
});
});
function showTab(tab) {
tabBtns.forEach((btn) => {
const on = btn.dataset.tab === tab;