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)?
Die obigen Antworten sind sehr hilfreich, aber wenn Schüler diesen Link verwenden, um Daten aus einem Formular hinzuzufügen, benötigen sie oft ein Beispiel.
Ich möchte ein Beispiel beisteuern, Input von anderen erhalten und nutzen .after() zum Einfügen von tr in die Tabelle mittels String interpolation .
function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();
$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}
function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();
$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<form>
<input type='text' name='studentname' />
<input type='text' name='studentmark' />
<input type='button' onclick="add()" value="Add new" />
</form>
<table id='student'>
<thead>
<th>Name</th>
<th>Mark</th>
</thead>
</table>
</body>
</html>
)Daryl:
Sie können ihn mit der Methode appendTo wie folgt an den tbody anhängen:
$(() => {
$("<tr><td>my data</td><td>more data</td></tr>").appendTo("tbody");
});Sie werden wahrscheinlich die neuesten JQuery- und ECMAScript-Versionen verwenden wollen. Dann können Sie eine Back-End-Sprache verwenden, um Ihre Daten in die Tabelle einzufügen. Sie können sie auch in eine Variable einpacken, etwa so:
$(() => {
var t_data = $('<tr><td>my data</td><td>more data</td></tr>');
t_data.appendTo('tbody');
});
Tabellenspalte mit JQuery hinzufügen:
wenn Sie eine Zeile hinzufügen möchten nach dem letzten Zeilenkind der Tabelle können Sie Folgendes versuchen
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');wenn Sie eine Zeile hinzufügen möchten 1. der untergeordneten Zeile der Tabelle können Sie Folgendes versuchen
$('#myTable tr').after('<tr>...</tr><tr>...</tr>'); CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
4 Stimmen
Vielen Dank, Ash. Ich bin auch gerade lernen jQuery und finden es schwer, herauszufinden, den besten Weg, vor allem einfache Dinge. Der Grund, warum sie als 2 Fragen sind, ist, weil ich eine gepostet und dann fast eine Stunde später erkannte ich, dass ich die andere in gesetzt haben sollte und dachte nicht, ich sollte die erste ändern.
33 Stimmen
Aus diesem Grund: google.com/search?q=jquery+add+table+row
19 Stimmen
FYI - Vermeiden Sie die Verwendung mehrerer Anhänge (verlangsamt die Leistung enorm), sondern bauen Sie Ihre Zeichenfolge oder verwenden Sie JavaScript join, die viel schneller ist.
1 Stimmen
Siehe: stackoverflow.com/a/50365764/7186739
2 Stimmen
Nur für den Fall, dass die Zeile zu komplex ist, was ich tue, ist, halten Sie die erste Zeile mit der erforderlichen Struktur versteckt, machen Sie einen Klon und ändern Sie den Text und fügen Sie nach der ersten Zeile, auf diese Weise, wenn Sie Daten aus Ajax-Antwort holen Ihre Tabelle erstellt werden, erinnern Sie sich Klon es außerhalb der Schleife, dann verwenden Sie es, um den Inhalt innerhalb der Schleife zu ändern. $("#mainTable tbody").append(row); row ist die modifizierte Kopie des Klons :)