38546


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

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

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

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

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

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

【CSS】

[code]

    .appLineDummy {
        display: none;
    }
    
[/code]

【JS】

[code]

    // テーブル行追加
    $('.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);
    });
    
[/code]


CC BY-SA 3.0
2017-10-09T09:31:53.617
38545
2017-10-09T10:57:25.693
2017-10-09T10:21:33.757
20206
25696
question
jquery
JavaScript(Jquery)で、Table明細上の行追加ボタン押下で適時行追加を果たしたい。


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

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

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

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

[以上を踏まえたDEMO](https://jsfiddle.net/5x5zr2k1/)

* * *

### 補足

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

[code]

    $(".rowins").on("click", ...);
    
[/code]

とせずに

[code]

    $(document).on("click", ".rowins", ...);
    
[/code]

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

詳しくはjQueryの`on`の[Direct and delegated
events](https://api.jquery.com/on/#direct-and-delegated-events)の項を参照してください。


CC BY-SA 3.0
2017-10-09T10:46:04.057
38546
2017-10-09T10:57:25.693
2020-06-17T08:14:45.997
-1
20206
38545
answer