記事の詳細
JavaScriptを使用してテーブルの表示行数を3行、5行、10行とユーザーが自由に切り替えられるようにする方法
最近のWebサイトはスマホにも対応しなければなりませんので「各要素でどれだけの幅を使うべきか…?」という事を考えてページを作らなければなりません。
ですが、テーブル等でキッチリと表示している箇所はなかなか修正が難しいんですよね…。
そのままスマホに対応すると、縦に長くなってしまう事も多いと思います。
そこで、今回はテーブルの要素に対して、ユーザーが指定した行数だけを表示する方法をご紹介致します。
※今回の記事を読むことで、下記のようなコンテンツを作ることができます。
下記を変更することでテーブルの表示数が変わります。
項番 | 商品名 |
---|---|
1 | りんご |
2 | みかん |
3 | なし |
4 | バナナ |
5 | パイナップル |
6 | ぶどう |
7 | グレープフルーツ |
8 | もも |
9 | いちご |
10 | レモン |
テーブルの要素を切り替えるプログラム
今回は下記のようなプログラムを組んでみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<p>下記を変更することでテーブルの表示数が変わります。<br> <select id="list-num" onchange="change_table();"> <option value="3" selected>3件</option> <option value="5">5件</option> <option value="10">10件</option> </select> </p> <table id="list-table"> <tbody> <tr><th>項番</th><th>商品名</th></tr> <tr><td>1</td><td>りんご</td></tr> <tr><td>2</td><td>みかん</td></tr> <tr><td>3</td><td>なし</td></tr> <tr><td>4</td><td>バナナ</td></tr> <tr><td>5</td><td>パイナップル</td></tr> <tr><td>6</td><td>ぶどう</td></tr> <tr><td>7</td><td>グレープフルーツ</td></tr> <tr><td>8</td><td>もも</td></tr> <tr><td>9</td><td>いちご</td></tr> <tr><td>10</td><td>レモン</td></tr> </tbody> </table> <script> <!-- function change_table(){ // 要素抜き出し var o_list_num_elm = document.getElementById('list-num'); var o_list_table_elm = document.getElementById('list-table'); // 表示数取得 var i_list_num = parseInt(o_list_num_elm.value); // tableのtr要素を抜き出し var a_tr_items = o_list_table_elm.children[0].children; // 全てのtr要素に対して処理(※見出しの1行分に注意) for(i=0; i<a_tr_items.length; i++){ if(i<(i_list_num+1)){ a_tr_items[i].style.display = 'table-row'; } else { a_tr_items[i].style.display = 'none'; } } return true; } // 読み込み時にも発火 change_table(); //--> </script> |
上記のコードで重要な点は下記になります。
① select要素下のoptionのvalueには数値を指定する
② 重要な要素(今回であればselect要素とtable要素)には特定のidを付ける
「変化を受け取る箇所」と「変化を行う箇所」を意識した構造にすることで、結構簡単に実装ができてしまいます。
もし、自身のWebサイトで表示行数の変更にもう一枚ページを作成しているようなことがあれば、ぜひ上記のコードを試してみてください!
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。