Coffeescript zum Bearbeiten von DOM mit jQuery

Question

Ich möchte eine Zeile in einer Tabelle basierend auf einer vorhandenen Zeile hinzufügen. Ich versuche es mit coffeescript zu tun - aber es funktioniert einfach nicht.

Ich glaube, ich missverstanden die Art und Weise, wie die Einfügung in den verschachtelten Div-Feldern funktioniert. Weil ich die Elemente bewegen kann, wenn sie keine Komponenten der unteren Ebene haben.

Also wenn Sie sehen können, was ich falsch mache - bitte beraten und ich würde auch schätzen, wenn Sie eine Zeile werfen können wie die ID des hinzugefügten Elements ändern ..

Hier ist die Coffeescript und die html

$(".add_row").click -> 
 
\t jQuery -> 
 
    \t $("#row1").clone().appendTo($("#row3")) 
 
\t alert "Done"

<table> 
 
    <div id="row1"> 
 
    <tr>  <td> r1c1 </td>  <td> r1c2</td>  </tr> 
 
    </div> 
 
    <div id="row2"> 
 
    <tr>  <td> r2c1</td>  <td> r2c2 </td>  </tr> 
 
    </div> 
 
    <div id="row3"> 
 
    <tr>  <td> r3c1 </td>  <td> r3c2</td>  </tr> 
 
    </div> 
 
    <tr> 
 
    <td>-</td> <td> <button class="add_row"> Add Another Row </button> </td> 
 
    </tr> 
 
</table>

Answer 1

Ihre HTML nicht gültig ist so wahrscheinlich der Browser und t wird umschreiben hole alles für dich ab.

Vom fine specification:

Zulässiger Inhalt
Ein optionales caption Element, gefolgt von null oder mehr colgroup Elementen, gefolgt von einem optionalen thead Elemente, gefolgt von

ein tfoot Element, gefolgt von Null oder mehr tbody Elemente, oder ein oder mehrere tr Elemen ts

oder

null oder mehr tbody Elemente oder ein oder mehr tr Elemente gefolgt von einem optionalen tfoot Elemente

Insbesondere ist <table><div> ungültig . Wenn Ihr jQuery mit dem <table> arbeitet, ist #row1 überhaupt nicht in der Tabelle enthalten und es enthält möglicherweise nicht das, was Sie erwarten.

Valid HTML ist wichtig, damit die HTML-fix:

<table> 
    <tr id="row1"> 
    <td> r1c1 </td> 
    <td> r1c2 </td> 
    </tr> 
    <tr id="row2"> 
    <td> r2c1 </td> 
    <td> r2c2 </td> 
    </tr> 
    <tr id="row3"> 
    <td> r3c1 </td> 
    <td> r3c2 </td> 
    </tr> 
    <tr> 
    <td>-</td> 
    <td> <button class="add_row"> Add Another Row </button> </td> 
    </tr> 
</table> 

Dann wollen Sie Ihre CoffeeScripts reparieren. Zuerst die Einrückung, die konsistent und korrekt sein muss, da die Einrückung die Struktur Ihres CoffeeScript definiert. Außerdem ist der interne Aufruf jQuery -> nicht erforderlich, mit dem eine Funktion aufgerufen wird, die aufgerufen werden soll, wenn das Dokument zur Arbeit bereit ist. Sie möchten jedoch gerade ein wenig Code ausführen, wenn Sie auf die Schaltfläche klicken. Darüber hinaus möchten Sie nicht appendTo als das verwenden:

Fügen Sie jedes Element in der Gruppe der übereinstimmenden Elemente an das Ende des Ziels.

, wo Sie die geklonten Reihe nach#row3, nicht in sie setzen wollen. Sie wären besser dran after mit und beginnend mit #row3 wie folgt aus:

$(".add_row").click -> 
    $('#row3').after($('#row1').clone()) 

So bleibt Ihnen immer noch mit einigen Problemen, insbesondere:

1. Sie doppelte #row1 Elemente haben werden.
2. Wenn Sie die Taste erneut drücken, werden neue Zeilen nach #row3 und nicht direkt über der Schaltflächenzeile hinzugefügt.

Ich werde die Festlegung dieser als Übung für den Leser verlassen.

Zum Beispiel: https://jsfiddle.net/ambiguous/ksndgdpa/