Heim >Web-Frontend >js-Tutorial >jQuery-Tipps: Fügen Sie dynamisch neue Zeilen in eine Tabelle ein
jQuery-Tipps: Fügen Sie dynamisch neue Zeilen in eine Tabelle ein
- PHPzOriginal
- 2024-02-28 11:51:03757Durchsuche
Titel: jQuery-Tipps: Neue Zeilen dynamisch in Tabellen einfügen
In der Webentwicklung ist es oft notwendig, neue Zeilen dynamisch in Tabellen einzufügen. Diese Funktion kann sehr einfach mit jQuery implementiert werden. Im Folgenden wird erläutert, wie mit jQuery dynamisch neue Zeilen in die Tabelle eingefügt werden, und es werden spezifische Codebeispiele bereitgestellt.
Stellen Sie zunächst sicher, dass die jQuery-Bibliothek in der HTML-Datei eingeführt ist, entweder über einen CDN-Link oder eine lokale Datei. Unten ist eine einfache HTML-Struktur mit einer Tabelle und einer Schaltfläche:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态在表格中插入新的行</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="myTable"> <tr> <th>Name</th> <th>Age</th> </tr> </table> <button id="addRowBtn">新增行</button> </body> </html>
Als nächstes müssen wir jQuery-Code schreiben, um eine neue Zeile in die Tabelle einzufügen, wenn auf die Schaltfläche geklickt wird. Der Code lautet wie folgt:
$(document).ready(function() {
$('#addRowBtn').click(function() {
var name = prompt('请输入姓名：');
var age = prompt('请输入年龄：');
var newRow = '<tr><td>' + name + '</td><td>' + age + '</td></tr>';
$('#myTable').append(newRow);
});
});Im obigen Code binden wir zunächst das Klickereignis der Schaltfläche, nachdem das Dokument geladen wurde. Wenn auf die Schaltfläche geklickt wird, werden zwei Eingabeaufforderungsfelder angezeigt, in die jeweils der Name und das Alter eingegeben werden müssen Eingegebene Werte werden in einer neuen Tabellenzeile zusammengefügt. Verwenden Sie abschließend die append()-Methode von jQuery, um die neue Zeile in die Tabelle einzufügen.
Jetzt haben wir die Funktion zum dynamischen Einfügen neuer Zeilen in die Tabelle abgeschlossen. Sie können den obigen HTML- und jQuery-Code kopieren und in eine HTML-Datei einfügen, diese im Browser öffnen und auf die Schaltfläche klicken, um den Effekt zu testen. Ich hoffe, dass Ihnen dieses Beispiel dabei helfen kann, zu lernen, wie Sie mit jQuery dynamisch neue Zeilen in eine Tabelle einfügen.
Das obige ist der detaillierte Inhalt vonjQuery-Tipps: Fügen Sie dynamisch neue Zeilen in eine Tabelle ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!