JavaScript(Jquery)で、Table明細上の行追加ボタン押下で適時行追加を果たしたい。
表題の件、<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);
});