So fügen Sie in JQuery Zeilen zur Tabelle hinzu

Heute besprechen wir, wie man mit jQuery Zeilen zu einer Tabelle hinzufügt. Wenn Sie ein Webentwickler sind, müssen Sie wissen, dass die Darstellung von Daten auf der Seite wichtig ist. Eine Tabelle ist eine sehr gute Möglichkeit, Daten darzustellen. Um Tabellen zum Anzeigen von Daten verwenden zu können, müssen Sie wissen, wie Sie jQuery zum dynamischen Hinzufügen von Zeilen verwenden.

Sehen wir uns an, wie man mit jQuery Zeilen zu einer Tabelle hinzufügt.

Der erste Schritt besteht darin, das Tabellenobjekt zu erhalten. Wenn Sie bereits ein Tabellenobjekt haben, müssen Sie in jQuery nur die folgende Codezeile verwenden, um es abzurufen:

var table = $('table');

Wenn Sie kein Tabellenobjekt haben, müssen Sie die folgende Codezeile verwenden, um eine Tabelle zu erstellen Objekt:

var table = $('<table></table>');

Der zweite Schritt besteht darin, ein Zeilenobjekt zu erstellen. Um ein Zeilenobjekt zu erstellen, müssen Sie die folgende Codezeile verwenden:

var row = $('<tr></tr>');

Der dritte Schritt besteht darin, das Zellenobjekt zu erstellen. Um einer Zeile eine Zelle hinzuzufügen, müssen Sie die folgende Codezeile verwenden:

var cell = $('<td></td>');

Der vierte Schritt besteht darin, das Zellobjekt zum Zeilenobjekt hinzuzufügen.

row.append(cell);

Der fünfte Schritt besteht darin, das Zeilenobjekt zum Tabellenobjekt hinzuzufügen.

table.append(row);

Jetzt haben Sie eine Reihe von Zellen zur Tabelle hinzugefügt.

In einer echten Anwendung müssen Sie jedoch jeder Zeile in der Tabelle mehrere Zellen hinzufügen, und möglicherweise hat jede Zelle unterschiedliche Daten und Stile. In diesem Fall müssen Sie eine for-Schleife verwenden, um eine vollständige Tabelle zu erstellen. Schauen wir uns als Nächstes den vollständigen Code an:

var data = [
    {name: 'John', age: 30},
    {name: 'Jane', age: 28},
    {name: 'Bob', age: 35},
    {name: 'Mary', age: 29}
];

var table = $('<table></table>');
    
for(var i = 0; i < data.length; i++){
    var row = $('<tr></tr>');
    var name = $('').text(data[i].name);
    var age = $('').text(data[i].age);
        
    row.append(name).append(age);
    table.append(row);    
}

$('#tableWrapper').empty().append(table);

Dieser Code verwendet eine for-Schleife, um eine Datenliste zu durchlaufen und die Methode text() zu verwenden, um der Zelle Text hinzuzufügen. Verwenden Sie abschließend die Methode empty(), um den Inhalt des Elements #tableWrapper zu löschen, und fügen Sie mit der Methode append() das Tabellenobjekt hinzu, um den Aufbau der gesamten Tabellentabelle abzuschließen.

Zusammenfassung:

In diesem Artikel haben wir gelernt, wie man mit jQuery einzelne und mehrere Zeilen zu einer Tabelle hinzufügt. Dies ist eine sehr nützliche Technik, insbesondere wenn Sie der Seite dynamische Daten hinzufügen müssen. Nachdem Sie nun wissen, wie man Zeilen zu einer jQuery-Tabelle hinzufügt, probieren Sie es aus!

Das obige ist der detaillierte Inhalt vonSo fügen Sie in JQuery Zeilen zur Tabelle hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!