914 lines
52 KiB
HTML
914 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>水晶男孩｜全員發瘋</title>
|
|
<link rel="stylesheet" href="../assets/css/style.css">
|
|
<link rel="stylesheet" href="../assets/css/concert.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<link rel="stylesheet" href="../assets/css/tablet.css">
|
|
<style>
|
|
/* 本頁：對齊 concert.html 深色底＋白卡片；表格僅此頁 */
|
|
body.variety-shows-page .variety-shows-container {
|
|
padding: 50px 0 40px;
|
|
font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-archive-card {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 56px);
|
|
margin-bottom: 0;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid rgba(0, 0, 0, 0.02);
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 12px 16px;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 40px auto;
|
|
padding: 0 20px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-toolbar .variety-shows-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
margin: 0;
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-toolbar .search-input {
|
|
width: auto;
|
|
flex: 1 1 220px;
|
|
max-width: 400px;
|
|
min-width: 160px;
|
|
margin: 0 0 0 auto;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-year-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
margin: 0 0 1.25rem;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-year-nav button {
|
|
border: 1px solid #e0e0e0;
|
|
background: #fafafa;
|
|
color: #333;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
padding: 8px 14px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-year-nav button:hover,
|
|
body.variety-shows-page .variety-shows-year-nav button:focus-visible {
|
|
border-color: #ffcc00;
|
|
background: #fff9e0;
|
|
outline: none;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-year-nav button.is-active {
|
|
border-color: #ffcc00;
|
|
background: #ffcc00;
|
|
color: #2f2f2f;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-year-nav[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-table-slot[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-table-slot+.variety-shows-table-slot {
|
|
margin-top: 2rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table-wrap {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin: 0;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table {
|
|
width: 100%;
|
|
min-width: 640px;
|
|
margin: 0;
|
|
border-collapse: collapse;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
background: transparent;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table thead th {
|
|
padding: 12px 10px;
|
|
border: none;
|
|
border-bottom: 2px solid #e6e6e6;
|
|
background: #fafafa;
|
|
color: #333;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table tbody td {
|
|
padding: 11px 10px;
|
|
border: none;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
color: #444;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table--inner tbody tr:last-child td,
|
|
body.variety-shows-page .variety-table__year-list>.variety-table__show-row:last-child td {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-row>td {
|
|
padding: 0;
|
|
background: #fafafa;
|
|
border-bottom: 2px solid #e8e8e8;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
width: 100%;
|
|
min-height: 48px;
|
|
margin: 0;
|
|
padding: 12px 16px;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
color: #333;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-row:not(.is-open)>td:has(.variety-table__year-toggle:hover),
|
|
body.variety-shows-page .variety-table__year-row:not(.is-open)>td:has(.variety-table__year-toggle:focus-visible) {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
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: #f5f5f5;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-toggle:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-label {
|
|
font-weight: 800;
|
|
font-size: clamp(1rem, 2vw, 1.12rem);
|
|
color: #333;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-meta {
|
|
margin-left: auto;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: #777;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-chevron {
|
|
color: #999;
|
|
font-size: 0.85rem;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-row.is-open .variety-table__year-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-panel {
|
|
padding: 0;
|
|
background: #fff;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__year-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table--inner {
|
|
margin: 0;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__show-row[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table tbody tr.variety-table__show-row:nth-child(even) td,
|
|
body.variety-shows-page .variety-table--inner tbody tr:nth-child(even) td {
|
|
background: #fcfcfc;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table .variety-table__program {
|
|
font-weight: 700;
|
|
color: #333;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table a {
|
|
color: #0645ad;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table a:hover,
|
|
body.variety-shows-page .variety-table a:focus-visible {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table a.variety-table__link--site {
|
|
color: #5a4a12;
|
|
font-weight: 700;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table .variety-table__date {
|
|
color: #444;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table__air-date {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table .variety-table__range-arrow {
|
|
margin: 0 0.18em;
|
|
color: #666;
|
|
font-size: 0.82em;
|
|
vertical-align: 0.08em;
|
|
}
|
|
|
|
body.variety-shows-page .variety-shows-back {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
margin-top: 1.75rem;
|
|
font-weight: 700;
|
|
color: #5a4a12;
|
|
}
|
|
|
|
body.variety-shows-page footer {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
body.variety-shows-page .variety-shows-archive-card {
|
|
padding: 20px 14px;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
body.variety-shows-page .variety-table thead th,
|
|
body.variety-shows-page .variety-table tbody td {
|
|
padding: 9px 6px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="concert-page variety-shows-page">
|
|
<header class="map-archive-header">
|
|
<div class="header-inner site-header-inner">
|
|
<h1 class="main-title">全員發瘋</h1>
|
|
<div class="subtitle-wrap">
|
|
<span class="sub-title">VARIETY · ALL OUT</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
|
|
|
<canvas id="particles"></canvas>
|
|
|
|
<div class="variety-shows-toolbar search-section">
|
|
<div class="variety-shows-tabs" role="tablist" aria-label="綜藝分類">
|
|
<button type="button" class="tab-btn active" role="tab" id="variety-tab-all" data-tab="all"
|
|
aria-selected="true" aria-controls="variety-shows-panels">全部</button>
|
|
<button type="button" class="tab-btn" role="tab" id="variety-tab-captain" data-tab="captain"
|
|
aria-selected="false" aria-controls="variety-shows-panels">隊長帶弟弟</button>
|
|
<button type="button" class="tab-btn" role="tab" id="variety-tab-solo" data-tab="solo"
|
|
aria-selected="false" aria-controls="variety-shows-panels">各自暴走</button>
|
|
</div>
|
|
<input type="search" id="variety-shows-search" class="search-input" placeholder="搜尋成員或節目…"
|
|
autocomplete="off" aria-label="搜尋成員或節目">
|
|
</div>
|
|
|
|
<main class="concert-container variety-shows-container">
|
|
<section id="variety-shows" class="variety-shows-archive" aria-label="全員發瘋">
|
|
<div class="variety-shows-archive-card">
|
|
<nav class="variety-shows-year-nav" aria-label="年份">
|
|
<button type="button" data-year="2016">2016</button>
|
|
<button type="button" data-year="2017">2017</button>
|
|
<button type="button" data-year="2018">2018</button>
|
|
<button type="button" data-year="2019">2019</button>
|
|
<button type="button" data-year="2020">2020</button>
|
|
</nav>
|
|
|
|
<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-table-wrap">
|
|
<table class="variety-table" id="variety-captain-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">播出日期</th>
|
|
<th scope="col">頻道</th>
|
|
<th scope="col">節目名稱</th>
|
|
<th scope="col">出演成員</th>
|
|
<th scope="col">集數</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="variety-table__year-list">
|
|
<tr class="variety-table__year-row" data-year="2016">
|
|
<td colspan="5">
|
|
<button type="button" class="variety-table__year-toggle" aria-expanded="false"
|
|
aria-controls="captain-year-2016" id="captain-year-2016-btn">
|
|
<span class="variety-table__year-label">2016</span>
|
|
<span class="variety-table__year-meta">6 檔</span>
|
|
<i class="fa-solid fa-chevron-down variety-table__year-chevron"
|
|
aria-hidden="true"></i>
|
|
</button>
|
|
<div id="captain-year-2016" class="variety-table__year-panel" hidden>
|
|
<table class="variety-table variety-table--inner">
|
|
<tbody>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2016-04-22"
|
|
data-air-end="2016-06-17"><span
|
|
class="variety-table__date">04/22</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">06/17</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">新西遊記2</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 09</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2016-04-27"
|
|
data-air-end="2016-06-22"><span
|
|
class="variety-table__date">04/27</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">06/22</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">Let's GO 時間探險隊3</td>
|
|
<td>張水院</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 09</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2016-05-04"
|
|
data-air-end="2016-07-20"><span
|
|
class="variety-table__date">05/04</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">07/20</span></td>
|
|
<td>K-Star</td>
|
|
<td class="variety-table__program">真實的帥氣的</td>
|
|
<td>—</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 12</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2016-06-05"
|
|
data-air-end="2016-08-21"><span
|
|
class="variety-table__date">06/05</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">08/21</span></td>
|
|
<td>JTBC</td>
|
|
<td class="variety-table__program">天下壯士</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 12</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2016-09-05"
|
|
data-air-end="2016-11-21"><span
|
|
class="variety-table__date">09/05</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">11/21</span></td>
|
|
<td>SBS</td>
|
|
<td class="variety-table__program">花樣旅行</td>
|
|
<td>殷志源、李宰鎮</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 12</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2016-10-12"
|
|
data-air-end="2016-10-21"><span
|
|
class="variety-table__date">10/12</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">10/21</span></td>
|
|
<td>JTBC</td>
|
|
<td class="variety-table__program">本月的活動王</td>
|
|
<td>張水院</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 02</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="variety-table__year-row" data-year="2017">
|
|
<td colspan="5">
|
|
<button type="button" class="variety-table__year-toggle" aria-expanded="false"
|
|
aria-controls="captain-year-2017" id="captain-year-2017-btn">
|
|
<span class="variety-table__year-label">2017</span>
|
|
<span class="variety-table__year-meta">4 檔</span>
|
|
<i class="fa-solid fa-chevron-down variety-table__year-chevron"
|
|
aria-hidden="true"></i>
|
|
</button>
|
|
<div id="captain-year-2017" class="variety-table__year-panel" hidden>
|
|
<table class="variety-table variety-table--inner">
|
|
<tbody>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2017-01-01"
|
|
data-air-end="2019-06-02"><span
|
|
class="variety-table__date">01/01</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">19/06/02</span></td>
|
|
<td>KBS2</td>
|
|
<td class="variety-table__program">超人回來了</td>
|
|
<td>高志鎔</td>
|
|
<td>163 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 280</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2017-01-08"
|
|
data-air-end="2017-03-12"><span
|
|
class="variety-table__date">01/08</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">03/12</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">新西遊記3</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 09＋導演版</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2017-06-13"
|
|
data-air-end="2017-08-22"><span
|
|
class="variety-table__date">06/13</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">08/22</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">新西遊記4</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 10＋導演版</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2017-12-05"
|
|
data-air-end="2018-01-09"><span
|
|
class="variety-table__date">12/05</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">18/01/09</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">姜食堂</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 05＋導演版</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="variety-table__year-row" data-year="2018">
|
|
<td colspan="5">
|
|
<button type="button" class="variety-table__year-toggle" aria-expanded="false"
|
|
aria-controls="captain-year-2018" id="captain-year-2018-btn">
|
|
<span class="variety-table__year-label">2018</span>
|
|
<span class="variety-table__year-meta">3 檔</span>
|
|
<i class="fa-solid fa-chevron-down variety-table__year-chevron"
|
|
aria-hidden="true"></i>
|
|
</button>
|
|
<div id="captain-year-2018" class="variety-table__year-panel" hidden>
|
|
<table class="variety-table variety-table--inner">
|
|
<tbody>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2018-05-05"
|
|
data-air-end="2018-10-27"><span
|
|
class="variety-table__date">05/05</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">10/27</span></td>
|
|
<td>MBC</td>
|
|
<td class="variety-table__program">意外的Q</td>
|
|
<td>—</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 25</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2018-09-30"
|
|
data-air-end="2018-10-28"><span
|
|
class="variety-table__date">09/30</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">10/28</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program"><a
|
|
class="variety-table__link--site"
|
|
href="NJTW/NJTW5.html">新西遊記5</a></td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 05</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="variety-table__air-date" data-air-start="2018-10-28"
|
|
data-air-end="2018-12-02"><span
|
|
class="variety-table__date">10/28</span> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">12/02</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">新西遊記6</td>
|
|
<td>殷志源</td>
|
|
<td>00 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 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> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">07/05</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">姜食堂2</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 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> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">08/17</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">高校供餐王</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 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> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">08/02</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">姜食堂3</td>
|
|
<td>殷志源</td>
|
|
<td>00 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 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> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">11/22</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">去冰島的三餐</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 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> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">20/01/03</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">新西遊記7</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 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> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">03/27</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">星期五星期五晚上</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 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> <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> <span
|
|
class="variety-table__date">12/18</span></td>
|
|
<td>tvN</td>
|
|
<td class="variety-table__program">新西遊記8</td>
|
|
<td>殷志源</td>
|
|
<td>01 <i
|
|
class="fa-solid fa-circle-right variety-table__range-arrow"
|
|
aria-hidden="true"></i> 10＋導演版</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="variety-shows-table-slot" id="each-rampage" data-show-tabs="all solo">
|
|
<div class="variety-table-wrap">
|
|
<table class="variety-table" id="variety-solo-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">播出日期</th>
|
|
<th scope="col">頻道</th>
|
|
<th scope="col">節目名稱</th>
|
|
<th scope="col">出演成員</th>
|
|
<th scope="col">集數</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="5">陸續補上；站內專頁例：<a class="variety-table__link--site"
|
|
href="NJTW/NJTW5.html">新西遊記5</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="variety-shows-back" href="variety.html#variety"><i class="fa-solid fa-arrow-left"
|
|
aria-hidden="true"></i> 返回瘋子與天才</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
|
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
|
|
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
|
</a>
|
|
</footer>
|
|
|
|
<script src="../assets/js/portal-nav.js"></script>
|
|
<script src="../assets/js/particles.js"></script>
|
|
<script>
|
|
(function () {
|
|
const tabBtns = document.querySelectorAll(".variety-shows-tabs .tab-btn");
|
|
const slots = document.querySelectorAll(".variety-shows-table-slot");
|
|
const input = document.getElementById("variety-shows-search");
|
|
const yearNav = document.querySelector(".variety-shows-year-nav");
|
|
const yearNavBtns = yearNav
|
|
? yearNav.querySelectorAll("button[data-year]")
|
|
: [];
|
|
const hashToTab = {
|
|
"captain-brothers": "captain",
|
|
"each-rampage": "solo",
|
|
};
|
|
|
|
function tabFromHash() {
|
|
const id = (location.hash || "").replace(/^#/, "");
|
|
return hashToTab[id] || "all";
|
|
}
|
|
|
|
function setYearOpen(yearRow, open) {
|
|
const btn = yearRow.querySelector(".variety-table__year-toggle");
|
|
const panel = yearRow.querySelector(".variety-table__year-panel");
|
|
if (!btn || !panel) return;
|
|
btn.setAttribute("aria-expanded", open ? "true" : "false");
|
|
panel.hidden = !open;
|
|
yearRow.classList.toggle("is-open", open);
|
|
}
|
|
|
|
function visibleSlotWithYears() {
|
|
return Array.from(slots).find(
|
|
(slot) => !slot.hidden && slot.querySelector(".variety-table__year-row")
|
|
);
|
|
}
|
|
|
|
function setActiveYearNav(year) {
|
|
yearNavBtns.forEach((btn) => {
|
|
btn.classList.toggle("is-active", btn.dataset.year === year);
|
|
});
|
|
}
|
|
|
|
function openYear(year) {
|
|
const slot = visibleSlotWithYears();
|
|
if (!slot) return;
|
|
const yearRow = slot.querySelector(
|
|
`.variety-table__year-row[data-year="${year}"]`
|
|
);
|
|
if (!yearRow) return;
|
|
setYearOpen(yearRow, true);
|
|
setActiveYearNav(year);
|
|
yearRow.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
}
|
|
|
|
function updateYearNavVisibility(tab) {
|
|
if (!yearNav) return;
|
|
yearNav.hidden = tab === "solo";
|
|
}
|
|
|
|
function filterVisibleRows() {
|
|
const q = (input && input.value.trim().toLowerCase()) || "";
|
|
slots.forEach((slot) => {
|
|
if (slot.hidden) return;
|
|
slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => {
|
|
const detailRows = yearRow.querySelectorAll(
|
|
".variety-table--inner tbody tr"
|
|
);
|
|
let anyMatch = false;
|
|
detailRows.forEach((row) => {
|
|
const air = row.querySelector(".variety-table__air-date");
|
|
const airData = air
|
|
? `${air.dataset.airStart || ""} ${air.dataset.airEnd || ""}`
|
|
: "";
|
|
const text = (row.textContent + " " + airData)
|
|
.replace(/\s+/g, " ")
|
|
.trim()
|
|
.toLowerCase();
|
|
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-table__year-toggle").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const yearRow = btn.closest(".variety-table__year-row");
|
|
const open = btn.getAttribute("aria-expanded") !== "true";
|
|
setYearOpen(yearRow, open);
|
|
if (open && yearRow.dataset.year) {
|
|
setActiveYearNav(yearRow.dataset.year);
|
|
}
|
|
});
|
|
});
|
|
|
|
yearNavBtns.forEach((btn) => {
|
|
btn.addEventListener("click", () => openYear(btn.dataset.year));
|
|
});
|
|
|
|
function showTab(tab) {
|
|
tabBtns.forEach((btn) => {
|
|
const on = btn.dataset.tab === tab;
|
|
btn.classList.toggle("active", on);
|
|
btn.setAttribute("aria-selected", on ? "true" : "false");
|
|
});
|
|
slots.forEach((slot) => {
|
|
const keys = (slot.dataset.showTabs || "").split(/\s+/);
|
|
slot.hidden = !keys.includes(tab);
|
|
});
|
|
updateYearNavVisibility(tab);
|
|
if (tab === "solo") setActiveYearNav("");
|
|
filterVisibleRows();
|
|
}
|
|
|
|
tabBtns.forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const tab = btn.dataset.tab;
|
|
showTab(tab);
|
|
const hash =
|
|
tab === "captain"
|
|
? "#captain-brothers"
|
|
: tab === "solo"
|
|
? "#each-rampage"
|
|
: "";
|
|
history.replaceState(
|
|
null,
|
|
"",
|
|
hash || location.pathname + location.search
|
|
);
|
|
});
|
|
});
|
|
|
|
if (input) {
|
|
input.addEventListener("input", filterVisibleRows);
|
|
}
|
|
|
|
window.addEventListener("hashchange", () => showTab(tabFromHash()));
|
|
showTab(tabFromHash());
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |