自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。この広告は、90日以上更新していないブログに表示しています。Railsこんにちは、マリンです。今回は要素をコピーする方法をご紹介しようと思います。概要ソースコード解説HTMLCoffeeScript補足まとめ概要ユーザー一覧を表示しているテーブルの行にコピーボタンを表示。そのボタンを押すとその行のコピーを直下に挿入します。userモデルにはnameとemailのカラムがあるとします。User.allを記述しておきます。UsersController解説HTMLまずはビューの方の解説です。class="copy-row">行全体をコピー対象にするためtrにクラスをつけます。予期しないtrを取ってこないためにも指定した方が安全だと思います。%></td>ここがコピーボタンになります。link_toである必要は特にないのですが、jQueryのソースの最後に使っているfalseの説明のためこれにしました。copy-userと言うクラスをクリックのセレクターにします。users.copy();</script>jQueryの呼び出しです。CoffeeScriptでは本題のjQueryの部分です。UsersControllerまず最初と最後のこの記述ですが、このように書くと、HTMLの最後に書いたような記述でメソッドを指定して呼び出すことができます。仕組みについては現在勉強中です。すみません...ちゃんと理解したらまた記事に書きます。$(@).parents('.copy-row')まずはリンクをクリックした時に、そのリンク(またはボタン等)の親の行を持ってきます。currentRow.clone(true).innsertAfter(currentRow)ここがキモです。currentRow(コピー対象の行)をclone(true)でコピーします。引数のtrueで対象のイベントや変数もコピーしてくれます。false)と第2引数をとることもでき、この場合は子要素のイベントはコピーされません。こちらを参考にさせていただきました。リファレンス:clone次にinnsertAfter(currentRow)でオリジナルの直下に挿入しています。.cloneはただ要素の中身諸々をコピーするだけですので、このように必ずどこかに表示してあげないと画面には反映されません。コピーする行に固有のidとかが付いていた場合、それも一緒にコピーしてしまって予期しない動作が起こったりしますので、その場合はそれらを削除する必要があります。(私の場合はid番号が付いていてdeleteでオリジナルも消えました...)コピーの動きについては以上です。補足コピーの話とは関係ありませんが、最後にあるfalseについてです。これは該当要素の本来の動きを打ち消してくれるようです。今回で言えばクリックの対象をlink_toにしていました。falseなしだとクリックした時に、一瞬行が表示されて、そして消える。いうような不可解な挙動をしたりします。これはクリックイベントの処理の後にlink本来の動きをしたために起こることです。この動きを打ち消すことで消えることなく無事表示されます。まとめ要素をコピーして表示するというのは結構見かける機能な気がします。実際には複数のデータを一括で編集するフォームに実装しました。覚えておけばまたどこかで使えそうです。~イベントによって表示・非表示を切り替える~こんにちは、マリンです。今回はボタンクリックなどのイベント...2018-03-28【jQuery】Ajaxでサーバー側にアクセスするこんにちは、マリンです。「Ajaxでサーバーのアク...2018-02-10【Ruby】RubyでURLにクエリ情報を追加するこんにちは、マリンです。いい加減覚えが悪いのでまとめとく。こんにちは、マリンです。db:rollbackしたい時の間違えない手順こんにちは、マリンです。なんだかんだ1年経ってた。»プロフィールid:song-of-life1352607アラサーで思い立ってプログラミングを始めた主婦が、自宅でお小遣い稼ぎをしたいがために自作アプリのリリースを目指すブログです。【Git】ブランチ間違えてコミットしてた!?月別アーカイブ参加グループプログラミングはてなブログをはじめよう!song-of-life1352607さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。