JavaScriptを使ってテーブルを簡単にフィルタリングする方法：実践的なチュートリアル

JavaScriptを使用してHTMLテーブルをリアルタイムでフィルタリングする方法を解説します。これにより、ユーザーがテーブル内のデータを瞬時に検索・絞り込むことができます。サンプルコードも用意していますので、あなたのサイトに簡単に実装することができます。

名前	年齢	国籍
キム	22	韓国
田中	25	日本
Smith	30	アメリカ
グェン	19	ベトナム

基本的なHTMLテーブルの構造
検索ボックスの追加
JavaScriptコードでフィルタリング機能を実装

基本的な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コードを使って、検索ボックスで入力されたキーワードに基づいてテーブルデータをフィルタリングする機能を実装します。

表の内容、tableとinputのIDは自由に変更してください。

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イベントが発火し、テーブルデータをフィルタリングする関数が実行されます。関数内では、入力されたキーワードを小文字に変換し、テーブルの各行をループ処理しています。行のテキストがキーワードを含んでいれば、その行を表示し、含んでいなければ非表示にしています。