Problem mit Javascript und Form Vervielfältigung

Question

Ich habe einen HTML-Code, der etwas geht:

< tr id="500" > 
< form id="500" onsubmit="DoThis()"> 
    < td>Info< /td> 
    etc... 
    etc... 
    < td>Info< /td> 
< /form> 
< /tr> 

Was ich in Javascript zu tun versuche, ist eine Kopie des Elements zu machen und es zu übergeordneten Tabelle hinzu:

var TrElement = document.getElementById ("500")

var parent = TrElement.parent; 
var NewTr  = TrElement.cloneNode(true); 
    parent.appendChild(NewTr); 

Dieser Code macht eine neue Kopie, die sich perfekt als ein auf dem Tisch liegt. Das Problem ist, dass ich nichts, weil das neue Element seine Form geschlossen einreichen: Es sieht wie folgt nun:

< tr id="500"> 
< form id="500" onsubmit="DoThis()" /> <----- end tag on the form :/ 
    < td>Info< /td> 
    etc... 
    etc... 
    < td>Info< /td> 
< /tr> 

Weiß jemand, wie ich die Form nicht zu schließen zwingen kann, oder eine andere Lösung haben zu diesem Problem?

Danke ...

Answer 1

Ich glaube, Sie haben Probleme, weil Ihr HTML nicht gültig ist. Ein Formular darf kein untergeordnetes Element einer Tabellenzeile sein, es muss sich innerhalb eines Tabellenelements befinden. Außerdem können Sie der Zeile und dem Formular nicht denselben ID-Wert zuweisen. Alle Element-IDs müssen unique und start with a letter sein.

Da ich mir nicht sicher bin, was genau Sie vorhaben, ist es schwer zu sagen, was ich vorschlagen soll, um es zu lösen. Sie könnten versuchen, ein neues Layout ohne Verwendung von Tabellen zu erstellen - es sei denn, Sie haben tabellarische Daten, dies ist wahrscheinlich der Weg zu gehen. Andernfalls könnten Sie versuchen, Ihr Formular in ein Tabellenelement zu verschachteln und dann eine Tabelle in diesem Formular zu haben, die Ihre Daten enthält, obwohl Sie wahrscheinlich die Spaltenbreiten so einstellen müssen, dass sie wie eine einzelne Daten-Tabelle aussehen.

Soweit die ID Kollisionen gehen, möchten Sie möglicherweise eine Zeichenfolge wie "row_" oder "form_" der ID voranstellen, um sie zu unterscheiden.

Wenn Sie weitere Informationen zu dem, was Sie erreichen möchten, bieten, kann ich diese Antwort möglicherweise verbessern.

Answer 2

Was ich tun soll: Ich habe viele Zeilen in meiner Tabelle. Diese Zeilen enthalten Informationen zu einem Element. sagen wie folgt aus: < td> < input type = "text" id = "item_ ">
< input type =" text" id = "Datum_
< input type =" submit“value = "submit"/>

Während der Benutzer das "datefield" verwischt, überprüft ein Javascript, ob Elemente mit demselben Datum in der Datenbank vorhanden sind. (Nicht alle Daten sind in den Zeilen dargestellt, einige sind noch in der Datenbank)

Wenn ein Artikel mit demselben Datum bereits existiert, möchte ich ein Element kopieren und die Eigenschaften und Werte seiner Childelements zu dem Artikel ändern, den wir bereits gefunden haben G.

Die neue Zeile sollte auch in der Lage sein, bearbeitete Daten zu senden.

Aber da sich die < Form> schließt, kann ich keine Daten übermitteln.

Schwer zu erklären, aber ich hoffe, Sie

Answer 3

schon einige Probleme hier zu verstehen.

<tr id="500"> 
    <form id="500" onsubmit="DoThis()"> 

Sie können keine 'ID' haben, die mit einer Nummer beginnt. Sie können nicht zwei identische ID-Werte im selben Dokument haben. Sie können nicht < form> direkt in einem < tr> haben, was das Problem hier verursacht. Für mich funktioniert selbst die erste Form nicht.

var TrElement = document.getElementById("500") 

Welcher?

var parent = TrElement.parent; 

Sollte parentNode sein.

var NewTr  = TrElement.cloneNode(true); 
parent.appendChild(NewTr); 

Sie haben nun weitere zwei Elemente mit id = "500"! Sie sollten die IDs der geklonten Elemente ändern, bevor Sie sie an das Dokument anhängen.

Es gibt ein paar Ansätze, die Sie hier nehmen können. Wenn sich alle Formularfelder in einer einzelnen Zelle befinden, können Sie das Formular einfach in die Zelle einfügen. Wenn Sie jedoch Felder für mehrere Zellen benötigen, muss das Formular außerhalb der Tabelle liegen.

In diesem Fall könnten Sie entweder ein einzelnes Formular außerhalb der gesamten Tabelle oder ein Formular vor Zeile haben, die jeweils eine separate < Tabelle> enthält. Sie können die Spalten aller Tabellen mithilfe von Spalten mit der angegebenen Breite und der CSS-Regel "table-layout: fixed" in eine Reihe bringen.

(Benötigen Sie überhaupt ein Formular? In Ihrem Beispiel fehlt möglicherweise Code, aber Sie verwenden das Formular nicht einmal, um es an eine beliebige Stelle zu senden. Wenn Ihre Seite reines JavaScript sein soll, . Sie können das Formular vollständig weglassen und nur Onclick Ereignisse auf Tasten legen)

angenommen, Sie mehrere Formulare müssen tun, hier einige Beispiel-Code:

<div> 
    <form method="post" action="setThing.script" class="setform" id="setform-500"> 
     <table><tr> 
      <td>Info</td> 
      <td><input type="text" name="setting" value="" /></td> 
      <td><input type="submit" value="Set" /></td> 
     </tr></table> 
    </form> 
</div> 
<button id="addrow">Another one, please!</button> 

<script type="text/javascript"> 
    function doThing() { 
     alert('validating form or something'); 
     return false; 
    } 

    var rownum= 500; 
    document.getElementById('setform-'+rownum).onsubmit= doThing; 

    document.getElementById('addrow').onclick= function() { 
     var f500= document.getElementById('setform-'+rownum); 
     var fnew= f500.cloneNode(true); 
     rownum++; 
     fnew.id= 'setform-'+rownum; 
     fnew.onsubmit= doThing; 
     f500.parentNode.appendChild(fnew); 
    } 
</script>