JavaScriptを使用してHTMLテーブルをリアルタイムでフィルタリングする方法を解説します。これにより、ユーザーがテーブル内のデータを瞬時に検索・絞り込むことができます。サンプルコードも用意していますので、あなたのサイトに簡単に実装することができます。
| 名前 | 年齢 | 国籍 |
|---|---|---|
| キム | 22 | 韓国 |
| 田中 | 25 | 日本 |
| Smith | 30 | アメリカ |
| グェン | 19 | ベトナム |
基本的なHTMLテーブルの構造
まず、フィルタリング機能を実装するための基本的なHTMLテーブルを作成しましょう。
以下は、シンプルなテーブルの構造例です。
<table id="myTable">
<tr>
<th>名前</th>
<th>年齢</th>
<th>国籍</th>
</tr>
<tr>
<td>田中</td>
<td>25</td>
<td>日本</td>
</tr>
<tr>
<td>Smith</td>
<td>30</td>
<td>アメリカ</td>
</tr>
<!-- 以下、さらに行を追加 -->
</table>検索ボックスの追加
次に、テーブルデータを検索するための検索ボックスを作成します。
<input type="text" id="searchInput" placeholder="キーワードで検索">JavaScriptコードでフィルタリング機能を実装
最後に、JavaScriptコードを使って、検索ボックスで入力されたキーワードに基づいてテーブルデータをフィルタリングする機能を実装します。
document.getElementById('searchInput').addEventListener('keyup', function() {
let searchValue = this.value.toLowerCase();
let tableRows = document.getElementById('myTable').getElementsByTagName('tr');
for (let i = 1; i < tableRows.length; i++) {
let rowText = tableRows[i].textContent.toLowerCase();
if (rowText.indexOf(searchValue) > -1) {
tableRows[i].style.display = '';
} else {
tableRows[i].style.display = 'none';
}
}
});このJavaScriptコードは、検索ボックスでキーワードが入力されるたびに、keyupイベントが発火し、テーブルデータをフィルタリングする関数が実行されます。関数内では、入力されたキーワードを小文字に変換し、テーブルの各行をループ処理しています。行のテキストがキーワードを含んでいれば、その行を表示し、含んでいなければ非表示にしています。
コメント