ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してテーブルフィルタリング機能を実装する
JavaScript を使用してテーブル フィルタリング機能を実装する
インターネット テクノロジの継続的な発展に伴い、テーブルは Web ページ上にデータを表示する一般的な方法になりました。ただし、データの量が膨大になると、ユーザーは特定のデータを見つけるのが困難になることがよくあります。したがって、ユーザーが必要なデータをすぐに見つけられるようにテーブルにフィルタリング機能を追加することが、多くの Web デザインの要件になっています。この記事では、JavaScriptを使用してテーブルフィルタリング機能を実装する方法を紹介します。
まず、データの形式が必要です。以下は簡単な例です:
<table id="data-table"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> <td>上海</td> </tr> <tr> <td>王五</td> <td>28</td> <td>男</td> <td>广州</td> </tr> </tbody> </table>
次に、ユーザーがフィルター条件を入力するための入力ボックスが必要です。次のコードを使用して入力ボックスを追加します。
<input type="text" id="filter-input" placeholder="输入筛选条件">
次に、テーブルのフィルター機能を実装するための JavaScript コードを作成する必要があります。コードは次のとおりです。
// 获取数据表格和筛选输入框 const table = document.querySelector('#data-table'); const filterInput = document.querySelector('#filter-input'); // 监听筛选输入框的输入事件 filterInput.addEventListener('input', () => { const filterValue = filterInput.value.toLowerCase(); // 获取输入框的值并转为小写 // 获取表格中的所有行 const rows = table.getElementsByTagName('tr'); // 遍历表格中的每一行,并根据筛选条件显示/隐藏行 for (let i = 0; i < rows.length; i++) { const row = rows[i]; const dataCells = row.getElementsByTagName('td'); let shouldShowRow = false; // 遍历当前行的每个单元格,检查是否有匹配的值 for (let j = 0; j < dataCells.length; j++) { const cell = dataCells[j]; const cellValue = cell.textContent.toLowerCase(); // 如果单元格的值与筛选条件匹配,显示该行 if (cellValue.includes(filterValue)) { shouldShowRow = true; } } // 根据shouldShowRow的值,显示/隐藏行 if (shouldShowRow) { row.style.display = ''; } else { row.style.display = 'none'; } } });
ユーザーが入力ボックスにフィルター条件を入力すると、テーブルは条件に基づいて対応する行を表示/非表示にします。
この記事では、JavaScript を使用してテーブル フィルタリング機能を実装する方法を紹介します。フィルター入力ボックスを追加し、対応する JavaScript コードを記述することで、ユーザーがテーブル内の特定のデータを簡単に見つけることができます。これは、大きなテーブルのデータ表示とクエリに非常に実用的な価値があります。この記事がお役に立てば幸いです!
以上がJavaScriptを使用してテーブルフィルタリング機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。