1

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

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

これが完全に機能していることを示すFIDDLEがあります。

だから私はすべてがうまくいったと思っていましたが、私はLaravelで作業していて、ページが保存されると編集ページを表示します. 編集ページは、テーブルがあった時点までテーブルを事前設定します。したがって、2 行追加して保存すると、編集ページは 3 行目に表示されます。

私の問題を実証するために、2 番目のFIDDLEをセットアップしました。ご覧のとおり、今回はそこにある行を削除すると、データを追加するように求められるため、新しい行を追加できなくなります。これは、データを追加しても発生します。

なぜこれが起こっているのかを理解しようとしていますが、喜びはありませんか？編集ページでこれを適切に機能させるにはどうすればよいですか?

ありがとう

4

1 に答える 1

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/

于 2016-05-19T08:24:05.103 に答える