fix 綜藝表搜尋列置頂
This commit is contained in:
+15
-21
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user