fix 綜藝表搜尋列置頂

This commit is contained in:
2026-05-17 03:00:54 +08:00
parent b1b9ac48ab
commit aaf44711d6
+15 -21
View File
@@ -181,14 +181,14 @@
<main class="content-container variety-page-main variety-shows-main chronicle-reader">
<section id="variety-shows" class="variety-block" aria-labelledby="variety-shows-title">
<h2 class="section-title" id="variety-shows-title">全員發瘋</h2>
<div class="search-section">
<input type="search" id="variety-shows-search" class="search-input" placeholder="搜尋成員或節目…"
autocomplete="off" aria-label="搜尋成員或節目">
</div>
<section class="variety-shows-subsection" id="captain-brothers" aria-labelledby="captain-brothers-title">
<h3 id="captain-brothers-title">隊長帶弟弟</h3>
<p class="variety-shows-placeholder">團綜節目:多人一起上的固定出演與合體綜藝。</p>
<div class="search-section">
<input type="search" id="variety-captain-search" class="search-input" placeholder="搜尋成員或節目…"
autocomplete="off" aria-controls="variety-captain-table" aria-label="搜尋隊長帶弟弟區的成員或節目">
</div>
<div class="variety-wiki-table-wrap">
<table class="variety-wiki-table" id="variety-captain-table">
<thead>
@@ -343,10 +343,6 @@
<section class="variety-shows-subsection" id="each-rampage" aria-labelledby="each-rampage-title">
<h3 id="each-rampage-title">各自暴走</h3>
<p class="variety-shows-placeholder">個人綜藝:成員各自上的節目,之後在此分表整理。</p>
<div class="search-section">
<input type="search" id="variety-solo-search" class="search-input" placeholder="搜尋成員或節目…"
autocomplete="off" aria-controls="variety-solo-table" aria-label="搜尋各自暴走區的成員或節目">
</div>
<div class="variety-wiki-table-wrap">
<table class="variety-wiki-table" id="variety-solo-table">
<thead>
@@ -384,20 +380,18 @@
<script src="../assets/js/particles.js"></script>
<script>
(function () {
function bindTableSearch(inputId, tableId) {
const input = document.getElementById(inputId);
const rows = document.querySelectorAll(`#${tableId} tbody tr`);
if (!input || !rows.length) return;
input.addEventListener("input", () => {
const q = input.value.trim().toLowerCase();
rows.forEach((row) => {
const text = row.textContent.replace(/\s+/g, " ").trim().toLowerCase();
row.hidden = Boolean(q) && !text.includes(q);
});
const input = document.getElementById("variety-shows-search");
const rows = document.querySelectorAll(
"#variety-captain-table tbody tr, #variety-solo-table tbody tr"
);
if (!input || !rows.length) return;
input.addEventListener("input", () => {
const q = input.value.trim().toLowerCase();
rows.forEach((row) => {
const text = row.textContent.replace(/\s+/g, " ").trim().toLowerCase();
row.hidden = Boolean(q) && !text.includes(q);
});
}
bindTableSearch("variety-captain-search", "variety-captain-table");
bindTableSearch("variety-solo-search", "variety-solo-table");
});
})();
</script>
</body>