このブログ投稿では、JavaScript でテーブルをフィルタリングするプロセスを定義します。
JavaScript でテーブルをフィルタリングする方法は?
JavaScript でテーブルをフィルタリングする方法を説明する例を見てみましょう。
例
まず、HTML ドキュメントに検索バーを作成し、「 オンキーアップ 」を呼び出すプロパティ filterTableFunc() 」キーを放したとき：
< 入力方式 = '文章' ID = '探す' オンキーアップ = 'filterTableFunc()' プレースホルダー = '探す.....' >< br >< br >
を使用して従業員データを格納するテーブルを作成します。 <テーブル> タグを付け、id を割り当てます “ 従業員データ 」：
< テーブル ID = 「従業員データ」 国境 = 「1」 >
< トレ >
< 番目 > 名前 番目 >
< 番目 > Eメール 番目 >
< 番目 > 性別 番目 >
< 番目 > 指定 番目 >
< 番目 > 入社日 番目 >
トレ >
< トレ >
< td > ジョン td >
< td > ジョン @ gmail. と td >
< td > 男 td >
< td > コンバージョン単価 td >
< td > 5 / 5 / 2020年 td >
トレ >
< トレ >
< td > スティーブン td >
< td > スティーブン @ gmail. と td >
< td > 男 td >
< td > 人事管理 td >
< td > 21 / 10 / 2020年 td >
トレ >
< トレ >
< td > 大きい td >
< td > マリ78 @ gmail. と td >
< td > 女性 td >
< td > 人事管理 td >
< td > 16 / 05 / 2022年 td >
トレ >
< トレ >
< td > ロンダ td >
< td > rhonda12 @ ホットメール。 と td >
< td > 男 td >
< td > CFA td >
< td > 23 / 06 / 2022年 td >
トレ >
テーブル >
HTML ファイルを実行すると、出力は次のようになります。
その後、フィルターテーブルに機能を追加しましょう。 JavaScript スクリプト ファイルまたはタグで、検索に基づいてテーブルのデータをフィルター処理する次のコードを使用します。
関数 filterTableFunc ( ) {
だった filterResult = 資料。 getElementById ( '探す' ) . 価値 . toLowerCase ( ) ;
だった empTable = 資料。 getElementById ( 「従業員データ」 ) ;
だった トレ = empTable。 getElementsByTagName ( 「トレ」 ) ;
為に ( だった 私 = 1 ; 私 < tr。 長さ ; 私 ++ ) {
トレ [ 私 ] . スタイル . 画面 = 'なし' ;
定数 tdArray = トレ [ 私 ] . getElementsByTagName ( 'td' ) ;
為に ( だった j = 0 ; j - 1 ) {
トレ [ 私 ] . スタイル . 画面 = '' ;
壊す ;
}
}
}
}
上記のコードでは:
- まず、関数を定義します」 filterTableFunc() 」。
- ID「」を使用して検索バーにアクセスします 探す 」を使用して、入力された値を取得し、それを小文字に変換します。 toLowerCase() ' 方法。
- ID を使用してフィルター操作が実行されるテーブルへの参照を取得します。 従業員データ 」。
- 次に、「 getElementsByTagName ' 方法。
- テーブルをその長さまで反復し、各テーブル エントリのデータを取得し、テーブルの格納された値が検索された値と等しいかどうかを確認します。ある場合は、それを表示します。
出力
上記の出力は、フィルター操作がテーブルに正常に適用されたことを示しています。
結論
テーブル データを反復処理して関連データを返すことにより、JavaScript でテーブルをフィルター処理できます。このフィルタリングは、特定のイベントで呼び出される関数によって行われます。このアプローチは、入力テキスト フィールドの大文字と小文字の区別に関係なく、入力された同一のデータに対してテーブルから対応するデータが取得されるように機能します。この投稿では、JavaScript でテーブルをフィルター処理するために使用できるアプローチについて説明します。