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)?
Reines JS ist in Ihrem Fall recht kurz
myTable.firstChild.innerHTML += '<tr><td>my data</td><td>more data</td></tr>'
function add() {
myTable.firstChild.innerHTML+=`<tr><td>date</td><td>${+new Date}</td></tr>`
}
td {border: 1px solid black;}
<button onclick="add()">Add</button><br>
<table id="myTable"><tbody></tbody> </table>(wenn wir die <tbody> y firstChild funktioniert es auch, aber jede Zeile wird mit <tbody> )
Versuchen Sie dies:
// Using jQuery - append
$('#myTable > tbody').append('<tr><td>3</td><td>Smith Patel</td></tr>');
// Using jQuery - appendTo
$('<tr><td>4</td><td>J. Thomson</td></tr>').appendTo("#myTable > tbody");
// Using jQuery - add html row
let tBodyHtml = $('#myTable > tbody').html();
tBodyHtml += '<tr><td>5</td><td>Patel S.</td></tr>';
$('#myTable > tbody').html(tBodyHtml);
// Using jQuery - after
$('#myTable > tbody tr:last').after('<tr><td>6</td><td>Angel Bruice</td></tr>');
// Using JavaScript - insertRow
const tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
const newRow = tableBody.insertRow(tableBody.rows.length);
newRow.innerHTML = '<tr><td>7</td><td>K. Ashwin</td></tr>';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
</tr>
<tr>
<td>2</td>
<td>Tom Adam</td>
</tr>
</tbody>
</table>
Um eine neue Zeile am Ende der aktuellen Zeile hinzuzufügen, können Sie wie folgt vorgehen
$('#yourtableid tr:last').after('<tr>...</tr><tr>...</tr>');Sie können wie oben mehrere Zeilen anhängen. Außerdem können Sie innere Daten wie folgt hinzufügen
$('#yourtableid tr:last').after('<tr><td>your data</td></tr>');Auf eine andere Art und Weise können Sie wie folgt vorgehen
let table = document.getElementById("tableId");
let row = table.insertRow(1); // pass position where you want to add a new row
//then add cells as you want with index
let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);
//add value to added td cell
cell0.innerHTML = "your td content here";
cell1.innerHTML = "your td content here";
cell2.innerHTML = "your td content here";
cell3.innerHTML = "your td content here";
Hier können Sie einfach auf die Schaltfläche klicken, dann erhalten Sie die Ausgabe. Wenn Sie klicken auf Zeile hinzufügen dann eine weitere Zeile hinzugefügt.
Ich hoffe, es ist sehr hilfreich.
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
table {
margin: 25px 0;
width: 200px;
}
table th, table td {
padding: 10px;
text-align: center;
}
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<b>Add table row in jQuery</b>
<p>
Click on the button below to
add a row to the table
</p>
<button class="add-row">
Add row
</button>
<table>
<thead>
<tr>
<th>Rows</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is row 0</td>
</tr>
</tbody>
</table>
<!-- Script to add table row -->
<script>
let rowno = 1;
$(document).ready(function () {
$(".add-row").click(function () {
rows = "<tr><td>This is row "
+ rowno + "</td></tr>";
tableBody = $("table tbody");
tableBody.append(rows);
rowno++;
});
});
</script>
</body>
</html> 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 :)