テーブル行の重複編集ページ

Question

少し問題があります。テーブルの行を追加したり削除したりすることができるテーブルがあります。基本的にテンプレート行を複製することでこれを行います。

var $tr = $template.clone().removeClass('template').prop('id', tr_id); 

私はFIDDLEを持っており、これは完全に機能しています。

私はすべてうまくいっていると思ったが、私はLaravelで働いていて、ページが保存されると私は編集ページを表示する。編集ページでは、テーブルを元の位置に移入します。したがって、2行追加して保存すると、編集ページは3行目に表示されます。

もう一度FIDDLEを設定して、問題を実証しました。ご覧のとおり、今度は、そこにある行を削除すると、データの追加を求めるので、新しい行を追加することはできなくなります。これは、データを追加した場合でも発生します。

私はこれがなぜ起こっているのか把握しようとしていますが、喜びはありませんか？編集ページでこれを正しく動作させるにはどうすればよいですか？

おかげ

Answer 1

あなた.tempate行は、表の最後の一つであり、あなたが行を削除した後に隠さ。あなたがそれを記入するまで追加することはできません。セレクタは無視します。

問題はテンプレートがテーブルにあり、目に見えませんが、無視されず、セレクタはそのテンプレートが新しい行を追加する前に塗りつぶされているかどうかをチェックします。以下に、あなたのアドオンのロジックを変更

は、この問題を解決します：

$('#add').on('click', function() { 
     $last_row = $('#table1 > tbody > tr:not(.template)').last(); 
     if(!hasValues($last_row)){ 
      alert('You need to insert at least one value in last row before adding'); 
     } else { 
      add_row($('#table1')); 
     } 
    }); 

代わりに、私は個人的には別のセクションで任意のテンプレートを置きます。あなたは、あなたの準備ができて関数の先頭に以下を追加することにより、事前にテーブルをロードするときだけでなく、既存の行の日付ピッカーを初期化する必要が

更新：

$("#table1 .hasDatepicker").removeClass("hasDatepicker"); 
    $("#table1 tr:not(.template)").find('.dateControl').each(function() { 
      $(this).datepicker({ 
      dateFormat: "dd-mm-yy"   
     }); 
    }); 

更新フィドルhttps://jsfiddle.net/cLssk6bv/5/