製品等のデータ比較のためのtable要素にフィルタ機能を付与する・「Products Comparison Table」

Ads

Products Comparison Table


Products Comparison Tableはよくある製品情報の比較tableにフィルタ機能を付与するためのコードです。上記のようなUI。比較対象が沢山ある場合、ユーザーが任意の製品を選択してFilterボタンを押せば表示を選択項目のみに出来る、というもの。それだけでなく、縦長になる場合、製品画像がfixedされる仕組みも素敵でした。結構良かったのでメモ的に書いてます。コードはcodyhouseなので商用でも利用可能で帰属のリンクも不要です。

Products Comparison Table動作サンプル