Tabellenzeile in jQuery hinzufügen

Question

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

Ist das akzeptabel?

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

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

Answer 1

Der von Ihnen vorgeschlagene Ansatz führt garantiert nicht zum gewünschten Ergebnis - was wäre, wenn Sie eine tbody zum Beispiel:

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

Das Ergebnis wäre wie folgt:

<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 after() Methode, solange es sich um gültiges HTML handelt, einschließlich mehrerer Zeilen wie im obigen Beispiel.

Aktualisierung: Ich überprüfe diese Antwort nach den jüngsten Aktivitäten zu dieser Frage. tbody im DOM; dies ist wahr, aber nur, wenn es mindestens eine Zeile gibt. Wenn Sie keine Zeilen haben, gibt es keine tbody es sei denn, Sie haben selbst eine angegeben.

DaRKoN_ schlägt vor die an den tbody anstatt den Inhalt nach der letzten tr . Dies umgeht das Problem, dass es keine Zeilen gibt, ist aber immer noch nicht kugelsicher, da man theoretisch mehrere Zeilen haben könnte. tbody Elemente und die Zeile würde zu jedem von ihnen hinzugefügt werden.

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

Ich denke, die sicherste Lösung ist wahrscheinlich, dass Ihre table enthält immer mindestens einen tbody in Ihrem Markup, auch wenn es keine Zeilen hat. Auf dieser Grundlage können Sie die folgende Formel verwenden, die unabhängig von der Anzahl der Zeilen funktioniert (und auch für mehrere tbody Elemente):

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

Answer 2

JQuery verfügt über eine eingebaute Möglichkeit, DOM-Elemente im laufenden Betrieb zu manipulieren.

Sie können Ihrer Tabelle alles Mögliche auf diese Weise hinzufügen:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

El $('<some-tag>') in jQuery ist ein Tag-Objekt, das mehrere Eigenschaften haben kann attr Attribute, die gesetzt und abgerufen werden können, sowie text , die den Text zwischen den Tags darstellt: <tag>text</tag> .

Das ist eine ziemlich seltsame Einrückung, aber in diesem Beispiel ist es einfacher zu sehen, was vor sich geht.

Answer 3

Seitdem haben sich die Dinge also geändert @Luke Bennett beantwortet diese Frage. Hier ist ein Update.

jQuery erkennt seit Version 1.4(?) automatisch, ob das Element, das Sie einfügen wollen (mit einem der append() , prepend() , before() , oder after() Methoden) ist ein <tr> und fügt sie in die erste <tbody> in Ihrer Tabelle oder wickelt sie in eine neue <tbody> wenn es keine gibt.

Also ja Ihr Beispielcode ist akzeptabel und wird gut funktionieren mit jQuery 1.4+. ;)

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

Answer 4

Was wäre, wenn Sie eine <tbody> et un <tfoot> ?

Zum Beispiel:

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

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

Die beste Lösung ist daher die Aufnahme einer <tbody> Tag und Verwendung .append statt .after .

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

Answer 5

Ich weiß, dass Sie nach einer jQuery-Methode gefragt haben. Ich habe viel gesucht und finde, dass wir es auf eine bessere Weise als mit JavaScript direkt durch die folgende Funktion tun können.

tableObject.insertRow(index)

index ist eine Ganzzahl, die die Position der einzufügenden Zeile angibt (beginnt bei 0). Es kann auch der Wert -1 verwendet werden, was zur Folge hat, dass die neue Zeile an der letzten Position eingefügt wird.

Dieser Parameter ist erforderlich in Firefox und Oper im Internet Explorer ist sie jedoch optional, Chrom y Safari .

Wenn dieser Parameter weggelassen wird, insertRow() fügt eine neue Zeile an der letzten Position im Internet Explorer und an der ersten Position in Chrome und Safari ein.

Sie funktioniert für jede akzeptable Struktur einer HTML-Tabelle.

Im folgenden Beispiel wird eine Zeile in die letzte Zeile eingefügt (-1 wird als Index verwendet):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

Ich hoffe, es hilft.