Doppelte Tabellenzeile opn Seite bearbeiten

Question

Ich stehe vor einem kleinen Problem. Ich habe eine Tabelle, in der ich Tabellenzeilen hinzufügen und entfernen kann. Ich tue dies, indem ich im Grunde eine Schablonenreihe kloniere, z.

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

Ich habe eine FIDDLE, die diese gut funktionierend zeigen.

So dachte ich, alles war gut, aber ich arbeite in Laravel und sobald die Seite gespeichert ist, zeige ich eine Bearbeitungsseite. Die Bearbeitungsseite füllt die Tabelle an dem Punkt auf, an dem sie sich befand. Wenn ich also zwei Zeilen hinzufügen und speichern würde, wäre die Bearbeitungsseite in der dritten Zeile.

Ich habe eine zweite FIDDLE eingerichtet, um zu versuchen und mein Problem zu demonstrieren. Wie Sie sehen, können Sie dieses Mal, wenn Sie die vorhandenen Zeilen löschen, keine neue Zeile mehr hinzufügen, weil Sie dazu aufgefordert werden, Daten hinzuzufügen. Dies tritt auch auf, wenn Sie die Daten hinzufügen.

Ich versuche herauszufinden, warum das passiert, aber keine Freude? Wie kann ich das auf der Bearbeitungsseite richtig machen?

Dank

Answer 1

Ihre .tempate Zeile ist die letzte in der Tabelle und versteckt, nachdem Sie eine Zeile entfernen. Sie können nicht hinzufügen, bis Sie es ausfüllen. Ihr Selektor sollte es ignorieren.

Das Problem ist, dass Ihre Vorlage in der Tabelle unsichtbar ist, aber nicht ignoriert wird und der Selektor überprüft, ob diese Vorlage gefüllt ist, bevor eine neue Zeile hinzugefügt wird.

Ändern Sie Ihre Add-Logik auf die folgenden wird dieses Problem beheben:

$('#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')); 
     } 
    }); 

Alternativ würde ich persönlich alle Vorlagen in einem separaten Abschnitt setzen.

aktualisieren Sie müssen auch die Datumsauswahl für vorhandene Zeilen initialisieren, wenn Sie die vorher befüllte Tabelle laden, indem Sie die folgenden am Anfang Ihrer Ready-Funktion hinzugefügt:

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

Aktualisiert Geige https://jsfiddle.net/cLssk6bv/5/