【jQuery】tableの行を簡単オシャレに表示・非表示させてみよう！
tableの列行、いわゆる<tr>を何かのアクションで表示・非表示させたい時ってありませんか？
例えば、ECサイトの注文フォームで「上記の住所と別の住所に送る」みたいなチェックボックスを押すと新たに住所を記入する列行が表示されるみたいな。
ありません？？
「あんまりないかも」
あるってことにしてくれませんか？
プログラミングやWordPressを習得するのに一番近道な方法とは？
目次
簡単にやります
もう、簡単すぎて「こんなことブログに書くな！」と怒られちゃいそうなので最初からコード書いちゃいます。
【HTML】
| 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 | <div class="checkbox"> <label> <input id="check" type="checkbox" onclick="hideToggle($('.hide_area'));"> 表示させる！ </label> </div> <table class="table table-bordered table-hover"> <tr> <td>1</td> <td>iPhone</td> </tr> <tr> <td>2</td> <td>iPad</td> </tr> <!-- 表示・非表示をする行 --> <tr class="hide_area"> <td>3</td> <td>iPod</td> </tr> <!-- 表示・非表示をする行 --> <tr class="hide_area"> <td>4</td> <td>Mac Book Pro</td> </tr> <tr> <td>5</td> <td>Mac Book Air</td> </tr> </table> |
ちなみにBootstrapを入れた上でのコードになってます。
もちろんJqueryだけ入ってれば表示・非表示は問題ありません。
CSSは別途お好みで調整して下さいね！
【JavaScript】
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> // 初期表示 $(function(){ // 初期表示でチェックボックスが空だったら非表示エリアを隠す if ($('#check').val() != '1') { $('.hide_area').hide(); } }); // 表示/非表示 var speed = 500; //表示アニメのスピード（ミリ秒） var stateDeliv = 1; function hideToggle(hidearea) { hidearea.toggle(speed); } </script> |
解説
①テーブルの中で表示・非表示させたい<tr>に同じクラス名をつける
※サンプルのクラス名はhide_area
②初期表示にチェックボックスが空だったら非表示にする
③チェックボックスにtoggleアクションをつけて、speedを設定することでちょぴっとオシャレ感を出す
解説というまででもないですが、お役に立ったらうれしい限りです。
jQueryオススメ書籍
jQueryを初めからちゃんと勉強し直したい！もっと使いこなしたい！という方は下記の書籍がおすすめですよ。
列ではなくて、行では？
そうですね…汗
列ではなく行でした！
ご指摘ありがとうございます！
そっか、行ごと消せばいいんですよね！
今やりたかったことズバリな記事でとても参考になりました。
行と列、いつも間違えますわたし･･･。
こっぷさん
peiです！
コメントいただきありがとうございます！！！
そう言っていただけるととても嬉しいです。
一緒に勉強していきましょう(/･ω･)/