Files
sechskies/variety/variety-shows.html
T

924 lines
52 KiB
HTML
Raw Normal View History

2026-05-17 02:34:42 +08:00
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2026-05-17 02:58:17 +08:00
<title>水晶男孩|全員發瘋</title>
2026-05-17 02:34:42 +08:00
<link rel="stylesheet" href="../assets/css/style.css">
2026-05-17 13:30:21 +08:00
<link rel="stylesheet" href="../assets/css/concert.css">
2026-05-17 02:34:42 +08:00
<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">
2026-05-17 02:42:59 +08:00
<style>
2026-05-17 13:30:21 +08:00
/* 本頁:對齊 concert.html 深色底+白卡片;表格僅此頁 */
body.variety-shows-page .variety-shows-container {
padding: 50px 0 40px;
font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
2026-05-17 02:42:59 +08:00
}
2026-05-17 13:30:21 +08:00
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);
2026-05-17 02:53:45 +08:00
position: relative;
z-index: 1;
2026-05-17 15:08:18 +08:00
overflow-x: auto;
-webkit-overflow-scrolling: touch;
2026-05-17 02:42:59 +08:00
}
2026-05-17 13:43:01 +08:00
body.variety-shows-page .variety-shows-toolbar {
2026-05-17 13:30:21 +08:00
display: flex;
flex-wrap: wrap;
2026-05-17 13:43:01 +08:00
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;
2026-05-17 13:30:21 +08:00
gap: 10px;
2026-05-17 13:43:01 +08:00
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;
}
2026-05-17 15:08:18 +08:00
body.variety-shows-page .variety-shows-archive-card>.variety-table[data-show-tabs][hidden] {
2026-05-17 13:30:21 +08:00
display: none;
}
2026-05-17 15:08:18 +08:00
body.variety-shows-page .variety-shows-archive-card>.variety-table[data-show-tabs]+.variety-table[data-show-tabs] {
2026-05-17 13:30:21 +08:00
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #eee;
2026-05-17 02:42:59 +08:00
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table {
2026-05-17 02:42:59 +08:00
width: 100%;
min-width: 640px;
margin: 0;
border-collapse: collapse;
2026-05-17 15:13:40 +08:00
table-layout: fixed;
2026-05-17 13:30:21 +08:00
font-size: 0.9rem;
line-height: 1.5;
background: transparent;
2026-05-17 02:42:59 +08:00
}
2026-05-17 15:13:40 +08:00
body.variety-shows-page .variety-table__col-air {
width: 22%;
}
body.variety-shows-page .variety-table__col-channel {
width: 10%;
}
body.variety-shows-page .variety-table__col-program {
width: 28%;
}
body.variety-shows-page .variety-table__col-member {
width: 22%;
}
body.variety-shows-page .variety-table__col-eps {
width: 18%;
}
2026-05-17 19:52:01 +08:00
body.variety-shows-page .variety-table thead th {
2026-05-17 13:30:21 +08:00
padding: 12px 10px;
border: none;
border-bottom: 2px solid #e6e6e6;
background: #fafafa;
color: #333;
font-weight: 800;
2026-05-17 02:42:59 +08:00
text-align: center;
white-space: nowrap;
}
2026-05-17 19:52:01 +08:00
body.variety-shows-page .variety-table__show-row--labels td {
padding: 12px 10px;
border: none;
border-bottom: 2px solid #e6e6e6;
background: #fafafa;
color: #333;
font-weight: 800;
text-align: center;
white-space: nowrap;
2026-05-17 19:31:36 +08:00
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table tbody td {
2026-05-17 13:30:21 +08:00
padding: 11px 10px;
border: none;
border-bottom: 1px solid #f0f0f0;
2026-05-17 02:42:59 +08:00
text-align: center;
vertical-align: middle;
2026-05-17 13:30:21 +08:00
color: #444;
2026-05-17 02:42:59 +08:00
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table__year-row>td {
2026-05-17 03:42:08 +08:00
padding: 0;
2026-05-17 13:30:21 +08:00
background: #fafafa;
border-bottom: 2px solid #e8e8e8;
2026-05-17 13:27:22 +08:00
transition: background-color 0.15s ease;
2026-05-17 03:42:08 +08:00
}
body.variety-shows-page .variety-table__year-bar {
padding: 0;
vertical-align: middle;
}
body.variety-shows-page .variety-table__year-bar-inner {
2026-05-17 19:14:30 +08:00
display: grid;
grid-template-columns: 22% 10% 28% 22% 18%;
align-items: center;
2026-05-17 03:42:08 +08:00
width: 100%;
2026-05-17 13:30:21 +08:00
min-height: 48px;
box-sizing: border-box;
}
body.variety-shows-page .variety-table__year-toggle {
2026-05-17 19:14:30 +08:00
grid-column: 3;
justify-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
2026-05-17 13:27:22 +08:00
margin: 0;
2026-05-17 19:14:30 +08:00
padding: 12px 10px;
2026-05-17 03:42:08 +08:00
border: none;
2026-05-17 13:27:22 +08:00
border-radius: 0;
2026-05-17 03:42:08 +08:00
background: transparent;
cursor: pointer;
font: inherit;
2026-05-17 13:30:21 +08:00
color: #333;
text-align: center;
white-space: nowrap;
2026-05-17 03:42:08 +08:00
box-sizing: border-box;
}
2026-05-17 15:13:40 +08:00
body.variety-shows-page .variety-table__year-tail {
2026-05-17 19:14:30 +08:00
grid-column: 5;
justify-self: center;
display: inline-flex;
align-items: center;
gap: 0;
2026-05-17 19:14:30 +08:00
padding: 12px 10px;
2026-05-17 15:13:40 +08:00
white-space: nowrap;
cursor: pointer;
2026-05-17 13:27:22 +08:00
}
2026-05-17 15:13:40 +08:00
body.variety-shows-page .variety-table__year-row:not(.is-open):hover>td,
body.variety-shows-page .variety-table__year-row.is-open:hover>td {
2026-05-17 13:30:21 +08:00
background: #f5f5f5;
2026-05-17 03:42:08 +08:00
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table__year-toggle:focus-visible {
outline: none;
}
body.variety-shows-page .variety-table__year-label {
2026-05-17 13:30:21 +08:00
font-weight: 800;
font-size: clamp(1rem, 2vw, 1.12rem);
color: #333;
white-space: nowrap;
2026-05-17 03:42:08 +08:00
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table__year-meta {
2026-05-17 15:13:40 +08:00
margin-right: 8px;
2026-05-17 13:30:21 +08:00
font-size: 0.85rem;
font-weight: 600;
color: #777;
2026-05-17 03:42:08 +08:00
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table__year-chevron {
2026-05-17 13:30:21 +08:00
color: #999;
font-size: 0.85rem;
2026-05-17 03:42:08 +08:00
transition: transform 0.2s ease;
}
body.variety-shows-page .variety-table__year-row.is-open .variety-table__year-tail .variety-table__year-chevron {
2026-05-17 03:42:08 +08:00
transform: rotate(180deg);
}
2026-05-17 15:13:40 +08:00
body.variety-shows-page .variety-table__show-row {
display: table-row;
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table__show-row[hidden] {
2026-05-17 03:42:08 +08:00
display: none;
}
2026-05-17 19:52:01 +08:00
body.variety-shows-page .variety-table__year-list .variety-table__show-row:not(.variety-table__show-row--labels):nth-of-type(even) td {
2026-05-17 13:30:21 +08:00
background: #fcfcfc;
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table .variety-table__program {
2026-05-17 13:30:21 +08:00
font-weight: 700;
color: #333;
2026-05-17 02:42:59 +08:00
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table a {
2026-05-17 02:42:59 +08:00
color: #0645ad;
text-decoration: none;
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table a:hover,
body.variety-shows-page .variety-table a:focus-visible {
2026-05-17 02:42:59 +08:00
text-decoration: underline;
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table a.variety-table__link--site {
2026-05-17 02:42:59 +08:00
color: #5a4a12;
2026-05-17 13:30:21 +08:00
font-weight: 700;
2026-05-17 02:42:59 +08:00
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table .variety-table__date {
2026-05-17 13:30:21 +08:00
color: #444;
2026-05-17 03:42:08 +08:00
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table__air-date {
2026-05-17 03:47:33 +08:00
white-space: nowrap;
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table .variety-table__range-arrow {
2026-05-17 03:42:08 +08:00
margin: 0 0.18em;
2026-05-17 13:30:21 +08:00
color: #666;
2026-05-17 03:42:08 +08:00
font-size: 0.82em;
vertical-align: 0.08em;
2026-05-17 03:29:19 +08:00
}
2026-05-17 02:42:59 +08:00
body.variety-shows-page .variety-shows-back {
display: inline-flex;
align-items: center;
gap: 0.35rem;
2026-05-17 13:30:21 +08:00
margin-top: 1.75rem;
font-weight: 700;
2026-05-17 02:42:59 +08:00
color: #5a4a12;
}
2026-05-17 13:30:21 +08:00
body.variety-shows-page footer {
position: relative;
z-index: 1;
}
2026-05-17 02:42:59 +08:00
@media (max-width: 720px) {
2026-05-17 13:30:21 +08:00
body.variety-shows-page .variety-shows-archive-card {
padding: 20px 14px;
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table {
2026-05-17 02:42:59 +08:00
font-size: 0.8rem;
}
2026-05-17 13:27:22 +08:00
body.variety-shows-page .variety-table thead th,
body.variety-shows-page .variety-table tbody td {
2026-05-17 13:30:21 +08:00
padding: 9px 6px;
2026-05-17 02:42:59 +08:00
}
}
</style>
2026-05-17 02:34:42 +08:00
</head>
2026-05-17 13:30:21 +08:00
<body class="concert-page variety-shows-page">
2026-05-17 22:11:43 +08:00
<header class="inner-page-header">
2026-05-17 02:34:42 +08:00
<div class="header-inner site-header-inner">
2026-05-17 02:58:17 +08:00
<h1 class="main-title">全員發瘋</h1>
2026-05-17 02:34:42 +08:00
<div class="subtitle-wrap">
2026-05-17 02:58:17 +08:00
<span class="sub-title">VARIETY · ALL OUT</span>
2026-05-17 02:34:42 +08:00
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
2026-05-17 13:43:01 +08:00
<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"
2026-05-17 15:08:18 +08:00
aria-selected="true" aria-controls="variety-shows">全部</button>
2026-05-17 13:43:01 +08:00
<button type="button" class="tab-btn" role="tab" id="variety-tab-captain" data-tab="captain"
2026-05-17 15:08:18 +08:00
aria-selected="false" aria-controls="variety-shows">隊長帶弟弟</button>
2026-05-17 13:43:01 +08:00
<button type="button" class="tab-btn" role="tab" id="variety-tab-solo" data-tab="solo"
2026-05-17 15:08:18 +08:00
aria-selected="false" aria-controls="variety-shows">各自暴走</button>
2026-05-17 13:43:01 +08:00
</div>
2026-05-17 13:30:21 +08:00
<input type="search" id="variety-shows-search" class="search-input" placeholder="搜尋成員或節目…"
autocomplete="off" aria-label="搜尋成員或節目">
</div>
<main class="concert-container variety-shows-container">
2026-05-17 13:43:01 +08:00
<section id="variety-shows" class="variety-shows-archive" aria-label="全員發瘋">
2026-05-17 13:30:21 +08:00
<div class="variety-shows-archive-card">
2026-05-17 15:08:18 +08:00
<table class="variety-table" id="captain-brothers" data-show-tabs="all captain">
2026-05-17 19:52:01 +08:00
<colgroup>
<col class="variety-table__col-air">
<col class="variety-table__col-channel">
<col class="variety-table__col-program">
<col class="variety-table__col-member">
<col class="variety-table__col-eps">
</colgroup>
2026-05-17 15:13:40 +08:00
<tbody class="variety-table__year-list">
2026-05-17 18:54:09 +08:00
<tr class="variety-table__year-row" data-year="2016">
<td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2016-btn">
2026-05-17 13:27:22 +08:00
<span class="variety-table__year-label">2016</span>
</button>
<div class="variety-table__year-tail">
<span class="variety-table__year-meta">6 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
2026-05-17 15:13:40 +08:00
</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row variety-table__show-row--labels" data-year="2016" hidden>
<td>播出日期</td>
<td>頻道</td>
<td>節目名稱</td>
<td>出演成員</td>
<td>集數</td>
2026-05-17 19:23:30 +08:00
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2016">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">06/17</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;09</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2016">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<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&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;09</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2016">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">07/20</span></td>
<td>K-Star</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;12</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2016">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">08/21</span></td>
<td>JTBC</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;12</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2016">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">11/21</span></td>
<td>SBS</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;12</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2016">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">10/21</span></td>
<td>JTBC</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;02</td>
</tr>
2026-05-17 18:54:09 +08:00
<tr class="variety-table__year-row" data-year="2017">
<td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2017-btn">
2026-05-17 13:27:22 +08:00
<span class="variety-table__year-label">2017</span>
</button>
<div class="variety-table__year-tail">
<span class="variety-table__year-meta">4 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
2026-05-17 15:13:40 +08:00
</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row variety-table__show-row--labels" data-year="2017" hidden>
<td>播出日期</td>
<td>頻道</td>
<td>節目名稱</td>
<td>出演成員</td>
<td>集數</td>
2026-05-17 19:23:30 +08:00
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2017">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
2026-05-17 18:54:09 +08:00
class="variety-table__date">06/02</span></td>
2026-05-17 13:27:22 +08:00
<td>KBS2</td>
<td class="variety-table__program">超人回來了</td>
<td>高志鎔</td>
<td>163&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;280</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2017">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">03/12</span></td>
<td>tvN</td>
<td class="variety-table__program">新西遊記3</td>
<td>殷志源</td>
<td>01&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;09+導演版</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2017">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">08/22</span></td>
<td>tvN</td>
<td class="variety-table__program">新西遊記4</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>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2017">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
2026-05-17 18:54:09 +08:00
class="variety-table__date">01/09</span></td>
2026-05-17 13:27:22 +08:00
<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;05+導演版</td>
</tr>
2026-05-17 18:54:09 +08:00
<tr class="variety-table__year-row" data-year="2018">
<td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2018-btn">
2026-05-17 13:27:22 +08:00
<span class="variety-table__year-label">2018</span>
</button>
<div class="variety-table__year-tail">
<span class="variety-table__year-meta">3 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
2026-05-17 15:13:40 +08:00
</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row variety-table__show-row--labels" data-year="2018" hidden>
<td>播出日期</td>
<td>頻道</td>
<td>節目名稱</td>
<td>出演成員</td>
<td>集數</td>
2026-05-17 19:23:30 +08:00
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2018">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">10/27</span></td>
<td>MBC</td>
<td class="variety-table__program">意外的Q</td>
<td></td>
<td>01&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;25</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2018">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<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&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;05</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2018">
2026-05-17 13:27:22 +08:00
<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>&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;<span
class="variety-table__date">12/02</span></td>
<td>tvN</td>
<td class="variety-table__program">新西遊記6</td>
<td>殷志源</td>
<td>00&nbsp;<i
class="fa-solid fa-circle-right variety-table__range-arrow"
aria-hidden="true"></i>&nbsp;05+導演版</td>
</tr>
2026-05-17 18:54:09 +08:00
<tr class="variety-table__year-row" data-year="2019">
<td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2019-btn">
2026-05-17 13:27:22 +08:00
<span class="variety-table__year-label">2019</span>
</button>
<div class="variety-table__year-tail">
<span class="variety-table__year-meta">5 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
2026-05-17 15:13:40 +08:00
</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row variety-table__show-row--labels" data-year="2019" hidden>
<td>播出日期</td>
<td>頻道</td>
<td>節目名稱</td>
<td>出演成員</td>
<td>集數</td>
2026-05-17 19:23:30 +08:00
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2019">
2026-05-17 13:27:22 +08:00
<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>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2019">
2026-05-17 13:27:22 +08:00
<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>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2019">
2026-05-17 13:27:22 +08:00
<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>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2019">
2026-05-17 13:27:22 +08:00
<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>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2019">
2026-05-17 13:27:22 +08:00
<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
2026-05-17 18:54:09 +08:00
class="variety-table__date">01/03</span></td>
2026-05-17 13:27:22 +08:00
<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>
2026-05-17 18:54:09 +08:00
<tr class="variety-table__year-row" data-year="2020">
<td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2020-btn">
2026-05-17 13:27:22 +08:00
<span class="variety-table__year-label">2020</span>
</button>
<div class="variety-table__year-tail">
<span class="variety-table__year-meta">2 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
2026-05-17 15:13:40 +08:00
</td>
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row variety-table__show-row--labels" data-year="2020" hidden>
<td>播出日期</td>
<td>頻道</td>
<td>節目名稱</td>
<td>出演成員</td>
<td>集數</td>
2026-05-17 19:23:30 +08:00
</tr>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2020">
2026-05-17 13:27:22 +08:00
<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>
2026-05-17 19:52:01 +08:00
<tr class="variety-table__show-row" hidden data-year="2020">
2026-05-17 13:27:22 +08:00
<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>
2026-05-17 19:14:30 +08:00
</tbody>
2026-05-17 18:54:09 +08:00
</table>
2026-05-17 02:58:17 +08:00
2026-05-17 15:08:18 +08:00
<table class="variety-table" id="each-rampage" data-show-tabs="all solo">
2026-05-17 13:27:22 +08:00
<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>
2026-05-17 15:08:18 +08:00
</table>
2026-05-17 02:34:42 +08:00
<a class="variety-shows-back" href="variety.html#variety"><i class="fa-solid fa-arrow-left"
aria-hidden="true"></i> 返回瘋子與天才</a>
2026-05-17 13:30:21 +08:00
</div>
2026-05-17 02:34:42 +08:00
</section>
</main>
<footer>
<p>SECHSKIES Fanpage &copy; 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>
2026-05-17 02:53:45 +08:00
<script>
(function () {
2026-05-17 03:15:37 +08:00
const tabBtns = document.querySelectorAll(".variety-shows-tabs .tab-btn");
2026-05-17 15:08:18 +08:00
const slots = document.querySelectorAll(
".variety-shows-archive-card .variety-table[data-show-tabs]"
);
2026-05-17 03:00:54 +08:00
const input = document.getElementById("variety-shows-search");
2026-05-17 03:15:37 +08:00
const hashToTab = {
"captain-brothers": "captain",
"each-rampage": "solo",
};
function tabFromHash() {
const id = (location.hash || "").replace(/^#/, "");
return hashToTab[id] || "all";
}
function rowMatchesSearch(row, q) {
2026-05-17 19:52:01 +08:00
if (!q || row.classList.contains("variety-table__show-row--labels")) {
return true;
}
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();
return text.includes(q);
2026-05-17 03:42:08 +08:00
}
2026-05-17 19:52:01 +08:00
function getYearLabelsRow(slot, year) {
2026-05-17 18:54:09 +08:00
return slot.querySelector(
2026-05-17 19:52:01 +08:00
`.variety-table__show-row--labels[data-year="${year}"]`
2026-05-17 19:14:30 +08:00
);
}
2026-05-17 19:52:01 +08:00
function getYearShowRows(slot, year) {
return slot.querySelectorAll(
`.variety-table__show-row[data-year="${year}"]:not(.variety-table__show-row--labels)`
2026-05-17 19:23:30 +08:00
);
}
2026-05-17 19:52:01 +08:00
function applyYearDetailVisibility(yearRow, open, q) {
const year = yearRow.dataset.year;
const slot = yearRow.closest("table[data-show-tabs]");
if (!slot) return;
const labels = getYearLabelsRow(slot, year);
const showRows = getYearShowRows(slot, year);
let anyMatch = false;
2026-05-17 18:54:09 +08:00
2026-05-17 19:52:01 +08:00
showRows.forEach((row) => {
const match = rowMatchesSearch(row, q);
if (match) anyMatch = true;
if (!open) {
row.hidden = true;
} else {
row.hidden = Boolean(q) && !match;
2026-05-17 19:31:36 +08:00
}
2026-05-17 19:52:01 +08:00
});
2026-05-17 18:54:09 +08:00
2026-05-17 19:52:01 +08:00
if (labels) {
labels.hidden = !open || (Boolean(q) && !anyMatch);
}
return anyMatch;
2026-05-17 19:31:36 +08:00
}
function syncYearRows(slot) {
const q = (input && input.value.trim().toLowerCase()) || "";
slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => {
const year = yearRow.dataset.year;
const btn = yearRow.querySelector(".variety-table__year-toggle");
2026-05-17 19:52:01 +08:00
let yearOpen = yearRow.classList.contains("is-open");
let anyMatch = applyYearDetailVisibility(yearRow, yearOpen, q);
2026-05-17 13:43:01 +08:00
2026-05-17 19:52:01 +08:00
if (yearOpen && q && !anyMatch) {
yearOpen = false;
yearRow.classList.remove("is-open");
if (btn) btn.setAttribute("aria-expanded", "false");
applyYearDetailVisibility(yearRow, false, q);
2026-05-17 18:54:09 +08:00
}
2026-05-17 19:52:01 +08:00
if (q && anyMatch && !yearOpen) {
yearOpen = true;
yearRow.classList.add("is-open");
if (btn) btn.setAttribute("aria-expanded", "true");
2026-05-17 19:52:01 +08:00
applyYearDetailVisibility(yearRow, true, q);
anyMatch = true;
}
yearRow.hidden = Boolean(q) && !anyMatch;
2026-05-17 13:43:01 +08:00
});
}
function setYearOpen(yearRow, open) {
const btn = yearRow.querySelector(".variety-table__year-toggle");
2026-05-17 19:52:01 +08:00
if (!btn) return;
btn.setAttribute("aria-expanded", open ? "true" : "false");
yearRow.classList.toggle("is-open", open);
2026-05-17 19:52:01 +08:00
const q = (input && input.value.trim().toLowerCase()) || "";
applyYearDetailVisibility(yearRow, open, q);
2026-05-17 13:43:01 +08:00
}
2026-05-17 03:15:37 +08:00
function filterVisibleRows() {
slots.forEach((slot) => {
if (slot.hidden) return;
syncYearRows(slot);
2026-05-17 03:15:37 +08:00
});
}
2026-05-17 13:27:22 +08:00
document.querySelectorAll(".variety-table__year-toggle").forEach((btn) => {
2026-05-17 03:42:08 +08:00
btn.addEventListener("click", () => {
2026-05-17 13:27:22 +08:00
const yearRow = btn.closest(".variety-table__year-row");
2026-05-17 03:42:08 +08:00
const open = btn.getAttribute("aria-expanded") !== "true";
setYearOpen(yearRow, open);
});
});
2026-05-17 15:13:40 +08:00
document.querySelectorAll(".variety-table__year-tail").forEach((tail) => {
tail.addEventListener("click", () => {
tail.closest(".variety-table__year-row")
?.querySelector(".variety-table__year-toggle")
?.click();
});
});
2026-05-17 03:15:37 +08:00
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);
});
filterVisibleRows();
}
tabBtns.forEach((btn) => {
btn.addEventListener("click", () => {
const tab = btn.dataset.tab;
showTab(tab);
const hash =
tab === "captain"
? "#captain-brothers"
: tab === "solo"
2026-05-17 13:27:22 +08:00
? "#each-rampage"
: "";
2026-05-17 03:15:37 +08:00
history.replaceState(
null,
"",
hash || location.pathname + location.search
);
2026-05-17 02:53:45 +08:00
});
2026-05-17 03:00:54 +08:00
});
2026-05-17 03:15:37 +08:00
if (input) {
input.addEventListener("input", filterVisibleRows);
}
window.addEventListener("hashchange", () => showTab(tabFromHash()));
showTab(tabFromHash());
2026-05-17 02:53:45 +08:00
})();
</script>
2026-05-17 02:34:42 +08:00
</body>
2026-05-17 13:27:22 +08:00
</html>