2

表題の件、<https://mae.chab.in/archives/2146>の記事を参考に挑戦中です。

非表示にしてある1行目を複写して、ユーザ未入力の空行をボタン押下された行の後に現したいと考えています。

現在は下記【JS】にあるとおり、対応したい動作部分はコメントアウトしてあり
ボタン押下された行(ユーザが入力を済ませた行)を複写してしまう動作になっています。

コメントアウトしている部分で、ボタン押下された行の『直近祖先の、直下子孫の要素』を取得できれば状況は進展するのかな??、と捉えています。参考にした記事からいって...

初歩的な質問かと思われますが、如何したら1行目のクローンを作り出せるでしょうか?

HTMLも貼り付けたかったのですが、対応方法が分からず貼り付けできませんでした。簡単に述べておきます。
Table1行目のTRにのみclass=appLineDummyを設定(CSSで非表示にするため)。TDでinputのテキストボックスを複数配置。次の1行かつ最後でもあるTRは、classを未設定で上記同様のレイアウトでTDを構成。へんてこな説明で大変申し訳ございません。

【CSS】 

.appLineDummy {
    display: none;
}

【JS】

// テーブル行追加
$('.rowins').click(function() {
  var $torow = $(this).closest("tr");
  //活かしたい   var $copyrow = $torow.parents("table").children("tr");
  var $newRow = $torow.clone(true);
  //活かしたい   var $newRow = $copyrow.clone(true);
  $newRow.insertAfter($torow);
});

1 件の回答 1

0

如何したら1行目のクローンを作り出せるでしょうか?

わざわざ1行目に.appLineDummyクラスをつけているので、$(".appLineDummy")で取得すればいいのではないでしょうか。

また、2行目もどうせ1行目のコピーなので、HTMLに書かずにjsで追加してはどうでしょうか。

1行目をコピーするときに、.appLineDummyクラスを外さないとcssで非表示になってしまいますので注意する必要があります。

以上を踏まえたDEMO


補足

クリックのイベントハンドラーを追加するのに

$(".rowins").on("click", ...);

とせずに

$(document).on("click", ".rowins", ...);

としている理由ですが、前者だとこの文を実行した時点で存在する.rowinsクラスの要素のそれぞれにイベントハンドラーが追加されますので、後から追加された.rowins要素には効きません。後者はdocument.rowinsである子孫要素からbubble upしてきたイベントに対してコールバックが実行されます。なので後から追加された.rowins要素のクリックイベントをキャッチできます。

詳しくはjQueryのonDirect and delegated eventsの項を参照してください。

2
  • karamarimo 様 ありがとうございました。JavaScript・JQuery3日目で分からないことだらけで、正直説明頂きました部分の半分も理解できていないのですが、一先ず$copyrow に $("tr.appLineDummy"))を代入、クローンで生成された$newRowからClassを除去することで状況を進展させることができました。時間をかけて、最初に表示させる行も提示の関数から生成するようなことを考えてみます。(ページの初回表示だけaddRowBelowを呼び出す?!)
    – saya24
    Commented 2017年10月10日 1:45
  • 理解できない部分があったら質問していただいていいですよ。
    – sigh
    Commented 2017年10月10日 3:26

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。