記事の詳細

最近のWebサイトはスマホにも対応しなければなりませんので「各要素でどれだけの幅を使うべきか…?」という事を考えてページを作らなければなりません。

ですが、テーブル等でキッチリと表示している箇所はなかなか修正が難しいんですよね…。
そのままスマホに対応すると、縦に長くなってしまう事も多いと思います。

そこで、今回はテーブルの要素に対して、ユーザーが指定した行数だけを表示する方法をご紹介致します。

※今回の記事を読むことで、下記のようなコンテンツを作ることができます。

下記を変更することでテーブルの表示数が変わります。

項番 商品名
1 りんご
2 みかん
3 なし
4 バナナ
5 パイナップル
6 ぶどう
7 グレープフルーツ
8 もも
9 いちご
10 レモン

テーブルの要素を切り替えるプログラム

今回は下記のようなプログラムを組んでみました。

上記のコードで重要な点は下記になります。

① select要素下のoptionのvalueには数値を指定する
② 重要な要素(今回であればselect要素とtable要素)には特定のidを付ける

変化を受け取る箇所」と「変化を行う箇所」を意識した構造にすることで、結構簡単に実装ができてしまいます。

もし、自身のWebサイトで表示行数の変更にもう一枚ページを作成しているようなことがあれば、ぜひ上記のコードを試してみてください!

ではまた!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。小難しい記事を書くことが多いのですが、本人はそこまで小難しい性格……じゃなければ良いなぁと思ってます!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る