※当サイトにはプロモーションが含まれています。
クライアント 500行近いテーブルになってしまったので、テーブル内を検索できるようにしてくれ！
にゃテック おけまるだにゃ。
近年は、読み応えのある長文記事が増え、それに合わせて「作品一覧」「選手一覧」「学校一覧」などの情報を、記事内に一覧表（テーブル）でまとめるケースも見かけます。
たとえば映画作品なら、次のように作品の一覧がテーブルになっているイメージです。
しかし、そのような一覧表のテーブルを作ったとしても、行数（情報）が多すぎて読者が見つけられなければ意味がありません。
そこで今回は、ページ内にある特定のテーブルだけを対象に、検索窓へ入力した文字で行を絞り込めるJavaScriptを作ってみました。
テーブル内を検索するJavaScript
ページにある複数のテーブルを、それぞれ検索できるHTML、CSS、JavaScriptになります。
HTMLについて
２つのテーブルを記載したHTMLになります。
HTML
<!-- スポーツ -->
<section class="nya-genre-block">
<h2 class="nya-genre-title">スポーツ</h2>
<input class="nya-genre-search" type="text" placeholder="スポーツジャンル内で検索（例：ロッキー / 野球）" />
<table class="nya-genre-table">
<thead>
<tr><th>No</th><th>作品名</th><th>メモ</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>ロッキー</td><td>ボクシング</td></tr>
<tr><td>2</td><td>マネーボール</td><td>野球</td></tr>
<tr><td>3</td><td>スラムダンク（映画）</td><td>バスケ</td></tr>
<tr><td>4</td><td>栄光へのラン</td><td>陸上</td></tr>
</tbody>
</table>
</section>
<!-- アクション -->
<section class="nya-genre-block">
<h2 class="nya-genre-title">アクション</h2>
<input class="nya-genre-search" type="text" placeholder="アクションジャンル内で検索（例：ホーム / ランボー）" />
<table class="nya-genre-table">
<thead>
<tr><th>No</th><th>作品名</th><th>メモ</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>ランボー</td><td>アクション</td></tr>
<tr><td>2</td><td>コブラ</td><td>アクション</td></tr>
<tr><td>3</td><td>ダイ・ハード</td><td>アクション</td></tr>
<tr><td>4</td><td>ホームアローン</td><td>（ジャンル例として混在）</td></tr>
</tbody>
</table>
</section>それぞれのテーブルに個別のidを付けるのではなく、共通のclassを付与する形で実装しています。
これにより、同一ページ内に複数のテーブルがあっても、同じ処理をまとめて適用できます。
また、placeholderには、検索ボックスにあらかじめ表示しておきたい案内文を設定できます。
たとえば「作品名で検索」や「このジャンル内で検索」など、用途に応じた文言を表示すると親切だと思います。
placeholder="アクションジャンル内で検索（例：ホーム / ランボー）"CSSについて
下記のCSSは、主にテーブルのデザインに関するものになっています。
CSS
.nya-genre-block { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 14px; margin: 16px 0; }
.nya-genre-title { font-size: 1.15rem; margin: 0 0 10px; }
.nya-genre-search { width: 98%; padding: 10px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; margin: 0 0 10px; }
.nya-genre-table { width: 100%; border-collapse: collapse; }
.nya-genre-table th,
.nya-genre-table td { border: 1px solid #e2e2e2; padding: 10px; text-align: left; }
.nya-genre-table th { background: #f3f3f3; }
.nya-is-hidden { display: none; }このCSSのうち、動作に必須なのは次の１行のみです。
.nya-is-hidden { display: none; }それ以外のCSSは、テーブルや検索ボックスの見た目（デザイン）を整えるためのものなので、レイアウトや装飾にこだわらない場合は省略しても問題ありません。
なお、下記の箇所が検索ボックスのデザインに関するCSSになります。
.nya-genre-search { width: 98%; padding: 10px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; margin: 0 0 10px; }
JavaScriptについて
最後に、JavaScriptになります。
JavaScript
(function () {
function debounce(fn, wait) {
let t;
return function (...args) {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), wait);
};
}
function normalize(str) {
return (str || "").trim().toLowerCase();
}
document.querySelectorAll(".nya-genre-block").forEach((block) => {
const input = block.querySelector(".nya-genre-search");
const rows = Array.from(block.querySelectorAll(".nya-genre-table tbody tr"));
const run = debounce(() => {
const q = normalize(input.value);
rows.forEach((tr) => {
const text = normalize(tr.textContent);
tr.classList.toggle("nya-is-hidden", q.length > 0 && !text.includes(q));
});
}, 80);
input.addEventListener("input", run);
});
})();次のコードは、同一ページ内にある複数のテーブルを、ジャンルごとに個別処理するための起点となっています。
document.querySelectorAll(".nya-genre-block").nya-genre-blockを１ブロックとして扱うことで、検索ボックスとテーブルをセットで管理できます。
にゃのらいと これで、他ジャンルのテーブルまで一緒に絞り込んでしまうことを防げるにゃ。
次のコードが、検索条件に一致しない行だけを非表示にする“表示切り替え”の部分になります。
tr.classList.toggle("nya-is-hidden", q.length > 0 && !text.includes(q));CSS側で次の指定をしておくことで、一致しない行だけが瞬時に非表示になり、該当行のみが表示される仕組みになります。
.nya-is-hidden { display: none; }以上、ページ内にある特定のテーブルだけを対象に、検索窓へ入力した文字で行を絞り込む方法でした。
なお、キャッシュ系や高速化系のプラグインを利用している場合、JavaScriptの読み込み方法（遅延読み込み・結合・圧縮など）の影響で、JavaScriptが正常に動作しない可能性があるのでご留意下さい。
