HIR87_hutonnouedenerusco500

【jQuery】tableの行を簡単オシャレに表示・非表示させてみよう!

 
tableの行、いわゆる<tr>を何かのアクションで表示・非表示させたい時ってありませんか?
例えば、ECサイトの注文フォームで「上記の住所と別の住所に送る」みたいなチェックボックスを押すと新たに住所を記入する行が表示されるみたいな。

 
ありません??

 
PAK15_saikindeaiganaina-500
「あんまりないかも」

 
あるってことにしてくれませんか?

プログラミングやWordPressを習得するのに一番近道な方法とは?

簡単にやります

もう、簡単すぎて「こんなことブログに書くな!」と怒られちゃいそうなので最初からコード書いちゃいます。

【HTML】

ちなみにBootstrapを入れた上でのコードになってます。
もちろんJqueryだけ入ってれば表示・非表示は問題ありません。
CSSは別途お好みで調整して下さいね!

 
【JavaScript】

 
デモページ

 

解説

①テーブルの中で表示・非表示させたい<tr>に同じクラス名をつける
※サンプルのクラス名はhide_area

②初期表示にチェックボックスが空だったら非表示にする

③チェックボックスにtoggleアクションをつけて、speedを設定することでちょぴっとオシャレ感を出す

 
解説というまででもないですが、お役に立ったらうれしい限りです。

 

jQueryオススメ書籍

jQueryを初めからちゃんと勉強し直したい!もっと使いこなしたい!という方は下記の書籍がおすすめですよ。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

Comments: 4

  1. とおりすがり says:

    列ではなくて、行では?

    • pei says:

      そうですね…汗
      列ではなく行でした!
      ご指摘ありがとうございます!

  2. こっぷ says:

    そっか、行ごと消せばいいんですよね!
    今やりたかったことズバリな記事でとても参考になりました。
    行と列、いつも間違えますわたし・・・。

    • pei says:

      こっぷさん

      peiです!
      コメントいただきありがとうございます!!!

      そう言っていただけるととても嬉しいです。
      一緒に勉強していきましょう(/・ω・)/

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA