Web開発における知見共有系ページ
Web開発における知見共有系ページ

Web開発における知見共有系ページ

  • HTMLのテーブルにフィルター機能を設定する方法
    • HTMLファイル
    • CSSファイル
    • JavaScriptファイル
    • 説明
HTMLのテーブルにフィルター機能を設定する方法

HTMLのテーブルにフィルター機能を追加する方法について説明します。 フィルター機能を持つテーブルは、大量のデータを扱う際に便利です。 ユーザーがテーブル内のデータを特定の条件で絞り込むことができるため、情報の検索が容易になります。 以下では、HTMLとCSSを使って基本的なフィルター機能を実装する方法を説明し、コード例を示します。

HTMLファイル

まず、テーブルとフィルター用のフォームを含む基本的なHTML構造を作成します。 以下のコードでは、テーブルとテキスト入力フィールドを用意しています。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Filterable Table</title> <link rel="stylesheet" href="test-style.css"> </head> <body> <h1>Filterable Table Example</h1> <input type="text" id="test-filterInput" placeholder="Search for names.."> <table id="test-table"> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>30</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Los Angeles</td> </tr> <tr> <td>Sam Johnson</td> <td>40</td> <td>Chicago</td> </tr> <!-- More rows as needed --> </tbody> </table> <script src="test-script.js"></script> </body> </html> CSSファイル

次に、テーブルのスタイリングを行います。 以下のCSSは、テーブルの見た目を整え、フィルター入力フィールドのスタイリングをします。

/* test-style.css */ body { font-family: Arial, sans-serif; margin: 20px; } #test-filterInput { margin-bottom: 10px; padding: 8px; width: 100%; box-sizing: border-box; } #test-table { width: 100%; border-collapse: collapse; } #test-table th, #test-table td { border: 1px solid #ddd; padding: 8px; } #test-table th { background-color: #f4f4f4; } JavaScriptファイル

最後に、フィルター機能を実装するためのJavaScriptコードを追加します。 このコードは、ユーザーが入力フィールドに文字を入力するたびにテーブルの行をフィルタリングします。

// test-script.js document.getElementById('test-filterInput').addEventListener('keyup', function() { var input = document.getElementById('test-filterInput').value.toLowerCase(); var table = document.getElementById('test-table'); var tr = table.getElementsByTagName('tr'); for (var i = 1; i < tr.length; i++) { var td = tr[i].getElementsByTagName('td'); var match = false; for (var j = 0; j < td.length; j++) { if (td[j].innerHTML.toLowerCase().indexOf(input) > -1) { match = true; break; } } if (match) { tr[i].style.display = ''; } else { tr[i].style.display = 'none'; } } }); 説明

このフィルター機能は、ユーザーが入力フィールドに文字を入力すると、テーブルの行をリアルタイムでフィルタリングします。 JavaScriptコードは、以下のように動作します：

1. ユーザーがtest-filterInputフィールドに文字を入力するたびに、keyupイベントが発火します。 2. イベントリスナーが実行され、入力値を小文字に変換します。 3. テーブル内の各行を取得し、それぞれのセルを調べます。 4. セルの内容に入力値が含まれている場合、その行を表示し、含まれていない場合は非表示にします。

これにより、ユーザーが入力する文字に応じて、テーブルの表示内容が動的に変更されます。 フィルター機能を持つテーブルは、データ量が多い場合に非常に便利です。

📎📎📎📎📎📎📎📎📎📎