Tabellenzeile in jQuery hinzufügen

Was ist die beste Methode in jQuery, um eine zusätzliche Zeile zu einer Tabelle als die letzte Zeile hinzufügen?

Ist dies akzeptabel?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Gibt es Beschränkungen für das, was man zu einer solchen Tabelle hinzufügen kann (z. B. Eingaben, Auswahlen, Anzahl der Zeilen)?

Lösung

Der von Ihnen vorgeschlagene Ansatz liefert nicht unbedingt das gewünschte Ergebnis - was wäre, wenn Sie zum Beispiel einen "Körper" hätten?

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Sie würden das folgende Ergebnis erhalten:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Ich würde daher stattdessen diesen Ansatz empfehlen:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

Sie können alles in die Methode after() einfügen, solange es gültiges HTML ist, einschließlich mehrerer Zeilen wie im obigen Beispiel.

Aktualisierung: Überarbeitung dieser Antwort nach den jüngsten Aktivitäten zu dieser Frage. eyelidlessness macht einen guten Kommentar, dass es immer einen tbody im DOM geben wird; das ist wahr, aber nur wenn es mindestens eine Zeile gibt. Wenn Sie keine Zeilen haben, gibt es auch keinen "Body", es sei denn, Sie haben selbst einen angegeben.

DaRKoN_ schlägt vor, an den tbody anzuhängen, anstatt den Inhalt nach der letzten tr hinzuzufügen. Dies umgeht das Problem, dass keine Zeilen vorhanden sind, ist aber immer noch nicht absolut sicher, da man theoretisch mehrere "tbody"-Elemente haben könnte und die Zeile an jedes von ihnen angehängt werden würde.

Wenn man alles abwägt, bin ich mir nicht sicher, ob es eine einzige einzeilige Lösung gibt, die alle möglichen Szenarien abdeckt. Sie müssen dafür sorgen, dass der jQuery-Code mit Ihrem Markup übereinstimmt.

Ich denke, die sicherste Lösung ist wahrscheinlich, sicherzustellen, dass Ihr "table" immer mindestens ein "tbody" in Ihrem Markup enthält, auch wenn es keine Zeilen hat. Auf dieser Basis können Sie das Folgende verwenden, das für jede Anzahl von Zeilen funktioniert (und auch mehrere "tbody"-Elemente berücksichtigt):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Kommentare (22)

Was wäre, wenn du einen und einen hättest?

Zum Beispiel:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Dann würde die neue Zeile in die Fußzeile eingefügt - nicht in den Textkörper.

Daher ist die beste Lösung, ein <tbody>-Tag einzufügen und .append zu verwenden, anstatt .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Kommentare (7)

Sie können diese großartige Funktion jQuery add table row verwenden. Sie funktioniert hervorragend mit Tabellen, die einen <tbody> haben und mit solchen, die keinen haben. Außerdem berücksichtigt sie die Spannweite der letzten Tabellenzeile.

Hier ist ein Anwendungsbeispiel:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Kommentare (4)