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"> <main class="content-container variety-page-main variety-shows-main chronicle-reader">
<section id="variety-shows" class="variety-block" aria-labelledby="variety-shows-title"> <section id="variety-shows" class="variety-block" aria-labelledby="variety-shows-title">
<h2 class="section-title" id="variety-shows-title">全員發瘋</h2> <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"> <section class="variety-shows-subsection" id="captain-brothers" aria-labelledby="captain-brothers-title">
<h3 id="captain-brothers-title">隊長帶弟弟</h3> <h3 id="captain-brothers-title">隊長帶弟弟</h3>
<p class="variety-shows-placeholder">團綜節目:多人一起上的固定出演與合體綜藝。</p> <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"> <div class="variety-wiki-table-wrap">
<table class="variety-wiki-table" id="variety-captain-table"> <table class="variety-wiki-table" id="variety-captain-table">
<thead> <thead>
@@ -343,10 +343,6 @@
<section class="variety-shows-subsection" id="each-rampage" aria-labelledby="each-rampage-title"> <section class="variety-shows-subsection" id="each-rampage" aria-labelledby="each-rampage-title">
<h3 id="each-rampage-title">各自暴走</h3> <h3 id="each-rampage-title">各自暴走</h3>
<p class="variety-shows-placeholder">個人綜藝:成員各自上的節目,之後在此分表整理。</p> <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"> <div class="variety-wiki-table-wrap">
<table class="variety-wiki-table" id="variety-solo-table"> <table class="variety-wiki-table" id="variety-solo-table">
<thead> <thead>
@@ -384,20 +380,18 @@
<script src="../assets/js/particles.js"></script> <script src="../assets/js/particles.js"></script>
<script> <script>
(function () { (function () {
function bindTableSearch(inputId, tableId) { const input = document.getElementById("variety-shows-search");
const input = document.getElementById(inputId); const rows = document.querySelectorAll(
const rows = document.querySelectorAll(`#${tableId} tbody tr`); "#variety-captain-table tbody tr, #variety-solo-table tbody tr"
if (!input || !rows.length) return; );
input.addEventListener("input", () => { if (!input || !rows.length) return;
const q = input.value.trim().toLowerCase(); input.addEventListener("input", () => {
rows.forEach((row) => { const q = input.value.trim().toLowerCase();
const text = row.textContent.replace(/\s+/g, " ").trim().toLowerCase(); rows.forEach((row) => {
row.hidden = Boolean(q) && !text.includes(q); 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> </script>
</body> </body>