Ich habe eine einfache HTMl-Tabelle wie diese ...
jQuery(document).ready(function() {
/* Calculate Total */
jQuery('table tr.customRow').each(function(i, row) {
console.log('Found Row');
jQuery(this).append('<tr>New Test Row</tr>');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="customRow">
<td>
My Row 1
</td>
</tr>
<tr class="customRow">
<td>
My Row 2
</td>
</tr>
<tr class="customRow">
<td>
My Row 3
</td>
</tr>
</table>Ich versuche, jQuery zu verwenden, um <tr>über jedem <tr>mit append gefundenen einen neuen hinzuzufügen . Das Konsolenprotokoll zeigt an, dass die Zeilen gefunden werden, die neue jedoch nicht hinzugefügt wird.
Wo gehe ich falsch?
Ihr Code enthält zwei Probleme. Erstens ist der HTML-Code, den Sie hinzufügen möchten, ungültig. <tr>Elemente dürfen keine Textknoten enthalten. Sie müssen den Inhalt in ein tdoder einschließen th.
Zweitens append()wird das Neue trin das Vorhandene eingefügt tr, was wiederum ungültiges HTML ist. Verwenden Sie before()stattdessen Ihr Ziel .
Beachten Sie auch, dass each()hier keine Schleife erforderlich ist , da der neue Inhalt in allen Fällen gleich ist. jQuery durchläuft implizit die Sammlung und erstellt den Inhalt für jedes ausgewählte Element für Sie. Versuche dies:
jQuery(function($) {
$('table tr.customRow').before('<tr><td>New Test Row</td></tr>');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="customRow">
<td>My Row 1</td>
</tr>
<tr class="customRow">
<td>My Row 2</td>
</tr>
<tr class="customRow">
<td>My Row 3</td>
</tr>
</table>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen