Fügen Sie in jQuery eine Tabellenzeile 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 für das, was Sie zu einer solchen Tabelle hinzufügen können (wie Eingaben, Auswahlmöglichkeiten, Anzahl der Zeilen)?
Der von Ihnen vorgeschlagene Ansatz kann nicht garantiert das gewünschte Ergebnis liefern. Was wäre, wenn Sie beispielsweise eine tbody hätten:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Am Ende würden Sie folgendes haben:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Ich würde daher stattdessen diesen Ansatz empfehlen:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Sie können alles in die after()-Methode einschließen, solange es gültiger HTML-Code ist, einschließlich mehrerer Zeilen wie im obigen Beispiel.
Update: Diese Antwort wird nach der letzten Aktivität mit dieser Frage erneut aufgerufen. Augenlidlosigkeit macht einen guten Kommentar, dass es immer eine tbody im DOM geben wird; das ist wahr, aber nur wenn es mindestens eine Zeile gibt. Wenn Sie keine Zeilen haben, gibt es keine tbody, es sei denn, Sie haben selbst eine festgelegt.
DaRKoN_ schlägt vor, dass an die tbody angehängt wird, anstatt nach der letzten tr Inhalt hinzuzufügen. Dadurch wird das Problem umgangen, dass keine Zeilen vorhanden sind. Es ist jedoch nicht kugelsicher, da theoretisch mehrere tbody-Elemente vorhanden sein könnten und die Zeile zu jedem Element hinzugefügt werden würde.
Ich bin mir nicht sicher, ob es eine einzige einzeilige Lösung gibt, die alle möglichen Szenarien berücksichtigt. Sie müssen sicherstellen, dass der jQuery-Code mit Ihrer Markierung übereinstimmt.
Ich denke, die sicherste Lösung besteht wahrscheinlich darin, sicherzustellen, dass Ihre table immer mindestens eine tbody in Ihrem Markup enthält, auch wenn es keine Zeilen enthält. Auf dieser Basis können Sie Folgendes verwenden, das in der Lage ist, wie viele Zeilen Sie haben (und auch mehrere tbody-Elemente berücksichtigen):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
jQuery verfügt über eine integrierte Funktion zur sofortigen Bearbeitung von DOM-Elementen.
So kannst du alles zu deinem Tisch hinzufügen:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
Das $('<some-tag>')-Ding in jQuery ist ein Tag-Objekt, das mehrere attr-Attribute haben kann, die gesetzt und abgerufen werden können, sowie text, die den Text zwischen dem Tag hier darstellt: <tag>text</tag>.
Dies ist eine ziemlich seltsame Einrückung, aber es ist einfacher für Sie zu sehen, was in diesem Beispiel vor sich geht.
Die Dinge haben sich also verändert, seit @Luke Bennett diese Frage beantwortet hat. Hier ist ein Update.
jQuery seit Version 1.4 (?) erkennt automatisch, ob das Element, das Sie einfügen möchten (mit einer der Methoden append() , prepend() , before() oder after() ), ein ist <tr> und fügt ihn in den ersten <tbody> in Ihrer Tabelle ein oder umschließt ihn in einen neuen <tbody>, falls noch keiner vorhanden ist.
Ja, Ihr Beispielcode ist akzeptabel und funktioniert gut mit jQuery 1.4+. ;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Was wäre, wenn Sie einen <tbody> und einen <tfoot> hätten?
Sowie:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Dann wird Ihre neue Zeile in die Fußzeile eingefügt - nicht in den Körper.
Daher ist die beste Lösung, ein <tbody>-Tag anzugeben und .append anstelle von .after zu verwenden.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Ich weiß, Sie haben nach einer jQuery-Methode gefragt. Ich habe viel gesucht und finde, dass wir dies besser tun können, als JavaScript direkt mit der folgenden Funktion zu verwenden.
tableObject.insertRow(index)
index ist eine Ganzzahl, die die Position der einzufügenden Zeile angibt (beginnt bei 0). Der Wert von -1 kann auch verwendet werden. was dazu führt, dass die neue Zeile an der letzten Position eingefügt wird.
Dieser Parameter ist in Firefox und Opera erforderlich, aber in Internet Explorer optional, Chrome und Safari .
Wenn dieser Parameter nicht angegeben wird, fügt insertRow() eine neue Zeile an der letzten Position in Internet Explorer und an der ersten Position in Chrome und Safari ein.
Es funktioniert für jede akzeptable Struktur der HTML-Tabelle.
Das folgende Beispiel fügt eine Zeile in last ein (-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.
Ich empfehle
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
im Gegensatz zu
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
Die Schlüsselwörter first und last gelten für das erste oder das letzte zu startende Tag, nicht für das Schließen. Daher ist dies bei verschachtelten Tabellen besser, wenn Sie nicht möchten, dass die verschachtelte Tabelle geändert wird, sondern zur Gesamttabelle 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>
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 Fiddle
Ich kann auch eine kleine Funktion empfehlen, um weitere 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 gerne 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 Demo Fiddle
Dies kann leicht mit der "last ()" - Funktion von jQuery durchgeführt werden.
$("#tableId").last().append("<tr><td>New row</td></tr>");
Ich verwende diesen Weg, wenn es keine Zeile in der Tabelle gibt und jede Zeile ziemlich kompliziert ist.
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
Wenn Sie für die beste Lösung hier eine verschachtelte Tabelle in der letzten Zeile finden, wird die neue Zeile der verschachtelten Tabelle anstelle der Haupttabelle hinzugefügt. Eine schnelle Lösung (unter Berücksichtigung von Tabellen mit/ohne Tabellen und Tabellen mit geschachtelten Tabellen):
function add_new_row(table, rowcontent) {
if ($(table).length > 0) {
if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
}
}
Anwendungsbeispiel:
add_new_row('#myTable','<tr><td>my new row</td></tr>');
Ich hatte einige verwandte Probleme und versuchte, eine Tabellenzeile nach der angeklickten Zeile einzufügen. Alles ist in Ordnung, außer dass der Aufruf von .after () für die letzte Zeile nicht funktioniert.
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
Ich bekam eine sehr unordentliche Lösung:
erstellen Sie die Tabelle wie folgt (ID für jede Zeile):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
usw ...
und dann :
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
Ich habe es so gelöst.
Jquery verwenden
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)
Ausschnitt
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>New York</td>
</tr>
</table>Meine Lösung:
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
Verwendungszweck:
$('#Table').addNewRow(id1);
// Create a row and append to table
var row = $('<tr />', {})
.appendTo("#table_id");
// Add columns to the row. <td> properties can be given in the JSON
$('<td />', {
'text': 'column1'
}).appendTo(row);
$('<td />', {
'text': 'column2',
'style': 'min-width:100px;'
}).appendTo(row);
Sie können diese große jQuery-Funktion zum Hinzufügen von Tabellenzeilen verwenden. Es funktioniert gut mit Tabellen, die <tbody> haben und nicht. Es berücksichtigt auch das Colspan Ihrer letzten Tabellenzeile.
Hier ist ein Beispiel für eine Verwendung:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Neils Antwort ist bei weitem die beste. Allerdings werden die Dinge sehr schnell chaotisch. Mein Vorschlag wäre, Variablen zu verwenden, um Elemente zu speichern und an die DOM-Hierarchie anzuhängen.
HTML
<table id="tableID">
<tbody>
</tbody>
</table>
JAVASCRIPT
// Reference to the table body
var body = $("#tableID").find('tbody');
// Create a new row element
var row = $('<tr>');
// Create a new column element
var column = $('<td>');
// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');
// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);
Ich fand dieses AddRow Plugin sehr nützlich für die Verwaltung von Tabellenzeilen. Luke's Lösung wäre jedoch die beste Lösung, wenn Sie nur eine neue Zeile hinzufügen müssen.
Hier ist ein Hacketi-Hack-Code. Ich wollte eine Zeilenvorlage in einer HTML - Seite verwalten. Tabellenzeilen 0 ... n werden zur Anforderungszeit gerendert, und dieses Beispiel hat eine hartcodierte Zeile und eine vereinfachte Vorlagenzeile. Die Vorlagentabelle ist ausgeblendet, und das Zeilen-Tag muss sich in einer gültigen Tabelle befinden. Andernfalls kann es von Browsern aus der Struktur " DOM " gelöscht werden. Beim Hinzufügen einer Zeile wird der Zähler + 1-Bezeichner verwendet. Der aktuelle Wert wird im Datenattribut beibehalten. Es garantiert, dass jede Zeile eindeutige URL parameter erhält.
Ich habe Tests mit Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (mit Symbian 3), Android-Standard- und Firefox-Beta-Browsern ausgeführt.
<table id="properties">
<tbody>
<tr>
<th>Name</th>
<th>Value</th>
<th> </th>
</tr>
<tr>
<td nowrap>key1</td>
<td><input type="text" name="property_key1" value="value1" size="70"/></td>
<td class="data_item_options">
<a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
</td>
</tr>
</tbody>
</table>
<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
<td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
<td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
<td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>
- - - -
// add row to html table, read html from row template
function addRow(sTableId) {
// find destination and template tables, find first <tr>
// in template. Wrap inner html around <tr> tags.
// Keep track of counter to give unique field names.
var table = $("#"+sTableId);
var template = $("#"+sTableId+"_rowtemplate");
var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
var id = parseInt(template.data("counter"),10)+1;
template.data("counter", id);
htmlCode = htmlCode.replace(/\${counter}/g, id);
table.find("tbody:last").append(htmlCode);
}
// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
var row = $(childElem).closest("tr"); // find <tr> parent
row.remove();
}
PS: Ich gebe dem jQuery-Team alle Credits. Sie verdienen alles. JavaScript-Programmierung ohne jQuery - Ich möchte nicht einmal über diesen Alptraum nachdenken.
Ich denke, ich habe in meinem Projekt getan, hier ist es:
html
<div class="container">
<div class = "row">
<div class = "span9">
<div class = "well">
<%= form_for (@replication) do |f| %>
<table>
<tr>
<td>
<%= f.label :SR_NO %>
</td>
<td>
<%= f.text_field :sr_no , :id => "txt_RegionName" %>
</td>
</tr>
<tr>
<td>
<%= f.label :Particular %>
</td>
<td>
<%= f.text_area :particular , :id => "txt_Region" %>
</td>
</tr>
<tr>
<td>
<%= f.label :Unit %>
</td>
<td>
<%= f.text_field :unit ,:id => "txt_Regio" %>
</td>
</tr>
<tr>
<td>
<%= f.label :Required_Quantity %>
</td>
<td>
<%= f.text_field :quantity ,:id => "txt_Regi" %>
</td>
</tr>
<tr>
<td></td>
<td>
<table>
<tr><td>
<input type="button" name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
</td><td><input type="button" name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
</td></tr>
</table>
</td>
</tr>
</table>
<% end %>
<table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
<tr>
<td>SR_NO</td>
<td>Item Name</td>
<td>Particular</td>
<td>Cost</td>
</tr>
</table>
<input type="button" id= "submit" value="Submit Repication" class="btn btn-success" />
</div>
</div>
</div>
</div>
js
$(document).ready(function() {
$('#submit').prop('disabled', true);
$('#btn_AddToList').click(function () {
$('#submit').prop('disabled', true);
var val = $('#txt_RegionName').val();
var val2 = $('#txt_Region').val();
var val3 = $('#txt_Regio').val();
var val4 = $('#txt_Regi').val();
$('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
$('#txt_RegionName').val('').focus();
$('#txt_Region').val('');
$('#txt_Regio').val('');
$('#txt_Regi').val('');
$('#btn_AddToList1').click(function () {
$('#submit').prop('disabled', false).addclass('btn btn-warning');
});
});
});
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Schreiben Sie mit einer Javascript-Funktion
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
<table id=myTable>
<tr><td></td></tr>
<style="height=0px;" tfoot></tfoot>
</table>
Sie können die Fußzeilenvariable zwischenspeichern und den Zugriff auf DOM reduzieren.
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
Da ich auch eine Möglichkeit habe, endlich eine Zeile oder einen bestimmten Ort hinzuzufügen, sollte ich auch folgendes mitteilen:
Zuerst die Länge oder die Reihen herausfinden:
var r=$("#content_table").length;
und fügen Sie dann die folgende Zeile hinzu:
$("#table_id").eq(r-1).after(row_html);
Um ein gutes Beispiel zum Thema hinzuzufügen, gibt es eine funktionierende Lösung, wenn Sie eine Zeile an einer bestimmten Position hinzufügen müssen.
Die zusätzliche Zeile wird nach der 5. Zeile oder am Ende der Tabelle eingefügt, wenn weniger als 5 Zeilen vorhanden sind.
var ninja_row = $('#banner_holder').find('tr');
if( $('#my_table tbody tr').length > 5){
$('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
$('#my_table tr:last').after(ninja_row);
}
Ich habe den Inhalt in einen bereiten (versteckten) Container unter der Tabelle gestellt. Wenn Sie (oder der Designer) ändern müssen, ist es nicht erforderlich, die JS zu bearbeiten.
<table id="banner_holder" style="display:none;">
<tr>
<td colspan="3">
<div class="wide-banner"></div>
</td>
</tr>
</table>
wenn Sie eine andere Variable haben, können Sie auf diesen Tag in <td>-Tag zugreifen.
Auf diese Weise hoffe ich, dass es hilfreich wäre
var table = $('#yourTableId');
var text = 'My Data in td';
var image = 'your/image.jpg';
var tr = (
'<tr>' +
'<td>'+ text +'</td>'+
'<td>'+ text +'</td>'+
'<td>'+
'<img src="' + image + '" alt="yourImage">'+
'</td>'+
'</tr>'
);
$('#yourTableId').append(tr);
Auf einfache Weise:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
fügt der first TBODY der Tabelle eine neue Zeile hinzu, ohne von THEAD oder TFOOT abhängig zu sein .. (Ich habe keine Informationen gefunden, aus welcher Version von jQuery .append() dieses Verhalten vorliegt.)
Sie können es in diesen Beispielen versuchen:
<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
<tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>
<table class="t"> <!-- table with two TBODYs -->
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
<tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
<tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>
<table class="t"> <!-- table without TBODY -->
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>
<table class="t"> <!-- table with TR not in TBODY -->
<tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>
<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>
In diesem Beispiel wird die a b-Zeile nach 1 2 eingefügt, im zweiten Beispiel nicht nach 3 4. Wenn die Tabelle leer war, erstellt jQuery TBODY für eine neue Zeile.
Das ist meine Lösung
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Wenn Sie das datatable JQuery-Plugin verwenden, können Sie es versuchen.
oTable = $('#tblStateFeesSetup').dataTable({
"bScrollCollapse": true,
"bJQueryUI": true,
...
...
//Custom Initializations.
});
//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';
//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);
Siehe Datatables fnAddData Datatables API
Wenn Sie row vor dem ersten untergeordneten <tr> Hinzufügen möchten.
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
Wenn Sie row nach dem letzten untergeordneten <tr> Hinzufügen möchten.
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
Füge eine Zeile mit JQuery hinzu:
wenn Sie die Zeile nach dem letzten Child der Tabelle - hinzufügen möchten, können Sie dies versuchen
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
wenn Sie die Zeile 1. Zeile der Tabelle Child hinzufügen möchten, können Sie dies versuchen
$('#myTable tr').after('<tr>...</tr><tr>...</tr>');
Die obigen Antworten sind sehr hilfreich, aber wenn Schüler auf diesen Link verweisen, um Daten aus dem Formular hinzuzufügen, benötigen sie häufig ein Muster.
Ich möchte ein Beispiel beisteuern, von dem Eingaben abgerufen werden, und .after() verwenden, um tr mit der Zeichenfolge interpolation in die Tabelle einzufügen.
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>Versuchen Sie dies: sehr einfache Möglichkeit
$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>Dies könnte auch gemacht werden:
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
TIPP: Das Einfügen von Zeilen in html table über innerHTML or .html() ist in einigen Browsern nicht gültig (ähnlicher IE9). Die Verwendung von .append("<tr></tr>") ist in keinem Browser ein guter Vorschlag. am besten und am schnellsten verwendet die pure javascript-Codes.
fügen Sie für diese Kombination mit jQuery nur ein neues Plugin hinzu, das dem von jQuery ähnelt:
$.fn.addRow=function(index/*-1: add to end or any desired index*/, cellsCount/*optional*/){
if(this[0].tagName.toLowerCase()!="table") return null;
var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
for(;i<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc
return $(r);
};
Und nun verwende es im ganzen Projekt ähnlich wie folgt:
var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);