Frage Fügen Sie eine Tabellenzeile in jQuery hinzu


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

Ist das akzeptabel?

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

Gibt es Einschränkungen bei dem, was Sie zu einer Tabelle hinzufügen können (z. B. Eingaben, Auswahl, Anzahl der Zeilen)?


2050
2017-10-04 21:33


Ursprung


Antworten:


Der Ansatz, den Sie vorschlagen, ist nicht garantiert, um Ihnen das Ergebnis zu geben, das Sie suchen - was ist, wenn Sie eine hatten tbody beispielsweise:

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

Sie würden mit dem folgenden enden:

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

Ich würde daher diesen Ansatz stattdessen empfehlen:

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

Sie können alles innerhalb der einschließen after() Methode, solange es gültiges HTML ist, einschließlich mehrerer Zeilen wie im obigen Beispiel.

Aktualisieren: Erneute Überprüfung dieser Antwort nach der letzten Aktivität mit dieser Frage. Augenlidheit macht einen guten Kommentar, dass es immer eine geben wird tbody im DOM; das ist richtig, aber nur wenn es mindestens eine Reihe gibt. Wenn Sie keine Zeilen haben, wird es keine geben tbody es sei denn, Sie haben selbst einen angegeben.

DaRKoN_ schlägt vor anhängend an die tbody anstatt Inhalte nach dem letzten hinzuzufügen tr. Dies geht um das Problem herum, keine Zeilen zu haben, ist aber immer noch nicht kugelsicher, da Sie theoretisch mehrere haben könnten tbody Elemente und die Reihe würden zu jedem von ihnen hinzugefügt werden.

Ich wäge alles ab und bin mir nicht sicher, ob es eine einzige Einzellösung gibt, die jedes einzelne mögliche Szenario berücksichtigt. Sie müssen sicherstellen, dass der jQuery-Code mit Ihrem Markup übereinstimmt.

Ich denke, die sicherste Lösung ist wahrscheinlich, Ihre zu gewährleisten table enthält immer mindestens einen tbody in Ihrem Markup, auch wenn es keine Zeilen enthält. Auf dieser Grundlage können Sie Folgendes verwenden, das jedoch für viele Zeilen funktioniert (und auch für mehrere Zeilen gilt) tbody Elemente):

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

1863
2017-10-04 21:49



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

Sie können Ihrer Tabelle so etwas hinzufügen:

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

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

Dies ist eine ziemlich merkwürdige Einrückung, aber es ist einfacher für Sie zu sehen, was in diesem Beispiel passiert.


697
2017-08-14 15:30



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

jQuery seit der Version 1.4 (?) erkennt automatisch, ob das Element, das Sie einfügen möchten (mit einem der append(), prepend(), before(), oder after() Methoden) ist a <tr> und fügt es in das erste ein <tbody> in deinem Tisch oder wickle es in ein neues ein <tbody> wenn man nicht existiert.

Ja, Ihr Beispielcode ist akzeptabel und wird mit jQuery 1.4+ funktionieren. ;)

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

274
2018-06-05 20:12



Was wäre, wenn du eine hast? <tbody> und ein <tfoot>?

Sowie:

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

Dann würde es Ihre neue Zeile in die Fußzeile einfügen - nicht in den Körper.

Daher ist die beste Lösung, a <tbody> tag und verwenden .append, eher, als .after.

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

147
2018-01-22 06:47



Ich weiß, dass Sie nach einer jQuery-Methode gefragt haben. Ich habe viel geschaut und festgestellt, dass wir es besser machen können, als wenn wir JavaScript direkt mit der folgenden Funktion verwenden.

tableObject.insertRow(index)

indexist eine Ganzzahl, die die Position der einzufügenden Zeile angibt (beginnt bei 0). Der Wert -1 kann auch verwendet werden; Dies führt dazu, dass die neue Zeile an der letzten Position eingefügt wird.

Dieser Parameter ist in Firefox und erforderlich Oper, aber es ist optional im Internet Explorer, Chrom und 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.

Es wird für jede akzeptable Struktur der HTML-Tabelle funktionieren.

Im folgenden Beispiel wird eine Zeile als letztes 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.


48
2018-04-20 17:38



ich empfehle

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

im Gegensatz zu

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

Das first und last Schlüsselwörter arbeiten am ersten oder letzten zu startenden Tag, nicht geschlossen. Daher spielt dies bei verschachtelten Tabellen eine bessere Rolle, wenn Sie nicht möchten, dass die geschachtelte Tabelle geändert wird, sondern stattdessen zur gesamten Tabelle hinzugefügt wird. Zumindest habe ich das gefunden.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

31
2017-10-22 21:34



Meiner Meinung nach ist der schnellste und klarste Weg

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

Hier ist Demo Geige

Auch kann ich eine kleine Funktion empfehlen, um mehr HTML-Änderungen vorzunehmen

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

Wenn Sie meinen String-Composer verwenden, können Sie dies wie folgt tun

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

Hier ist eine Demo Geige


26
2018-06-30 12:40