Fügen Sie jQuery eine Tabellenzeile hinzu

Was ist die beste Methode in jQuery, um der Tabelle eine zusätzliche Zeile als letzte Zeile hinzuzufügen?

Ist das akzeptabel?

 $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 

Gibt es Einschränkungen, was Sie zu einer solchen Tabelle hinzufügen können (z. B. Eingaben, Auswahlmöglichkeiten, Anzahl der Zeilen)?

2182
05 окт. Darryl Hein am 5. Oktober eingestellt 2008-10-05 00:33 08 um 0:33 2008-10-05 00:33
@ 33 Antworten
  • 1
  • 2

Der von Ihnen vorgeschlagene Ansatz garantiert nicht das tbody Ergebnis - was wäre, wenn Sie einen tbody , zum Beispiel:

 <table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> </table> 

Sie erhalten am Ende Folgendes:

 <table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> <tr>...</tr> </table> 

Daher würde ich diesen Ansatz empfehlen:

 $('#myTable tr:last').after('<tr>...</tr><tr>...</tr>'); 

Sie können etwas in die after() -Methode einschließen, sofern es für HTML gültig ist, einschließlich mehrerer Zeilen gemäß dem obigen Beispiel.

Update :. Wiederholen Sie diese Antwort nach der letzten Arbeit mit dieser Frage. Verantwortungslosigkeit stellt fest, dass es immer tbody im DOM geben wird; Dies ist wahr, aber nur wenn mindestens eine Zeile vorhanden ist. Wenn Sie keine Zeichenfolgen haben, wird es keine tbody , sofern Sie nicht selbst angegeben haben.

DaRKoN_ empfiehlt das Hinzufügen zu einem tbody statt nach dem letzten tr . Inhalt hinzuzufügen. Dies wirft das Problem fehlender Linien auf, ist jedoch immer noch nicht kugelsicher, da theoretisch mehrere tbody vorhanden sein können und zu jedem von ihnen eine Linie hinzugefügt wird.

Nachdem ich alles abgewogen habe, bin ich nicht sicher, dass es eine einzeilige Lösung gibt, die jedes mögliche Szenario 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 sie keine Zeilen enthält. Auf dieser Grundlage können Sie Folgendes verwenden, das funktioniert, obwohl Sie über mehrere Zeilen verfügen (und mehrere tbody berücksichtigen):

 $('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>'); 
1961
05 окт. Antworten Luke Bennett 05. Okt. 2008-10-05 00:49 08 um 08:49 Uhr 2008-10-05 00:49

jQuery verfügt über ein integriertes Tool zum direkten Verwalten von DOM-Elementen.

Sie können so etwas zu Ihrem Tisch hinzufügen:

 $("#tableID").find('tbody') .append($('<tr>') .append($('<td>') .append($('<img>') .attr('src', 'img.png') .text('Image cell') ) ) ); 
border=0

Das $('<some-tag>') object $('<some-tag>') in jQuery ist ein Tag-Objekt, das über mehrere attr Attribute verfügen kann, die gesetzt und abgerufen werden können, sowie text , der den Text zwischen dem Tag hier darstellt: <tag>text</tag> .

Dies ist ein ziemlich seltsamer Einzug, aber Sie können leichter erkennen, was in diesem Beispiel passiert.

723
14 авг. Die Antwort wird von Neil 14 August gegeben. 2009-08-14 18:30 09 um 18:30 Uhr 2009-08-14 18:30 Uhr

Also hat sich alles geändert, seit @Luke Bennett diese Frage beantwortet hat. Hier ist das Update.

jQuery bestimmt seit Version 1.4 (?) automatisch, ob das Element, das Sie einfügen möchten (mithilfe von append() , prepend() , before() oder after() ), <tr> und fügt es in das erste Element ein <tbody> in Ihrer Tabelle oder überträgt sie an einen neuen <tbody> , falls er nicht vorhanden ist.

Ihr Beispielcode ist also akzeptabel und funktioniert gut mit jQuery 1.4+ .;)

 $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 
288
05 июня '12 в 23:12 2012-06-05 23:12 Die Antwort wird von Salman Abbas am 5. Juni 12 um 23:12 gegeben. 2012-06-05 23:12

Was ist, wenn Sie <tbody> und <tfoot> ?

Zum Beispiel:

 <table> <tbody> <tr><td>Foo</td></tr> </tbody> <tfoot> <tr><td>footer information</td></tr> </tfoot> </table> 

Dann wird eine neue Zeile in die Fußzeile eingefügt, nicht in den Körper.

Daher ist es die beste Lösung, das <tbody> .append und .append und nicht .after .

 $("#myTable > tbody").append("<tr><td>row content</td></tr>"); 
157
22 янв. Die Antwort ist ChadT 22. Januar gegeben 2009-01-22 09:47 09 um 09:47 2009-01-22 09:47

Ich weiß, dass Sie nach der jQuery-Methode gefragt haben. Ich habe viel beobachtet und festgestellt, dass wir es besser können, als direkt mit der folgenden Funktion JavaScript zu verwenden.

 tableObject.insertRow(index) 

index ist eine ganze Zahl, die die Position der einzufügenden Zeile angibt (beginnt mit 0). Sie können auch den Wert -1 verwenden. Infolgedessen wird die neue Zeile an der letzten Position eingefügt.

Diese Option ist in Firefox und Opera erforderlich, jedoch nicht in Internet Explorer, Chrome und Safari .

Wenn dieser Parameter nicht insertRow() , insertRow() eine neue Zeile an der letzten Position in Internet Explorer und an der ersten Position in Chrome und Safari ein.

Dies funktioniert für jede akzeptable HTML-Tabellenstruktur.

Im folgenden Beispiel wird ein String in den letzten eingefügt (-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 das hilft.

55
20 апр. Die Antwort wird von shashwat Apr 20 gegeben 2012-04-20 20:38 '12 um 20:38 Uhr 2012-04-20 20:38

Ich empfehle

 $('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

im Gegensatz zu

 $('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>'); 

Die first und last Schlüsselwörter für das erste oder letzte Tag, das ausgeführt werden soll, werden nicht geschlossen. Daher sieht es mit verschachtelten Tabellen besser aus, wenn Sie nicht möchten, dass die verschachtelte Tabelle geändert und stattdessen der allgemeinen Tabelle 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> 
33
23 окт. Antwort von Curtor 23. Oktober 2010-10-23 00:34 '10 um 0:34 2010-10-23 00:34

Meiner Meinung nach der schnellste und intuitivste 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 gibt es eine Geige- Demo

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 es 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 eine Geige- Demo

30
30 июня '14 в 15:40 2014-06-30 15:40 Antwort gegeben am härtesten 30. Juni '14 um 15:40 Uhr 2014-06-30 15:40

Dies kann leicht mit der jQuery-Funktion "last ()" durchgeführt werden.

 $("#tableId").last().append("<tr><td>New row</td></tr>"); 
23
26 янв. Die Antwort wird Nischal am 26. Januar gegeben . 2010-01-26 16:34 '10 am 16:34 2010-01-26 16:34

Ich verwende diese Methode, wenn sich in der Tabelle keine Zeile befindet und jede Zeile ziemlich komplex ist.

style.css:

 ... #templateRow { display:none; } ... 

xxx.html

 ... <tr id="templateRow"> ... </tr> ... $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() ); ... 
17
16 дек. Antwort von Dominic 16. Dezember 2010-12-16 08:30 '10 um 8:30 Uhr 2010-12-16 08:30 Uhr

Für eine bessere Lösung wird hier die neue Zeile der verschachtelten Tabelle anstelle der Haupttabelle hinzugefügt, wenn sich in der letzten Zeile eine verschachtelte Tabelle befindet. Quick Fix (einschließlich Tabellen mit / ohne Body und Tabellen mit verschachtelten 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>'); 
14
22 янв. Die Antwort ist Oshua 22. Januar gegeben 2011-01-22 01:21 '11 am 1:21 2011-01-22 01:21

Ich hatte einige verwandte Probleme beim Versuch, eine Tabellenzeile nach einer 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 bin mit einer sehr unordentlichen Lösung gelandet:

Erstellen Sie eine 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); 
13
05 окт. Avron Olshewsky antwortete am 5. Oktober 2009-10-05 22:17 09 um 22:17 Uhr 2009-10-05 22:17

Ich habe es so entschieden.

Jquery verwenden

 $('#tab').append($('<tr>') .append($('<td>').append("text1")) .append($('<td>').append("text2")) .append($('<td>').append("text3")) .append($('<td>').append("text4")) ) 

Auszug

 <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> 
11
12 окт. Antwort Anton VBR 12. Okt. 2017-10-12 20:54 '17 um 20:54 Uhr 2017-10-12 20:54

Meine Lösung:

 //Adds a new table row $.fn.addNewRow = function (rowId) { $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>'); }; 

verwenden:

 $('#Table').addNewRow(id1); 
10
09 марта '12 в 3:48 2012-03-09 03:48 Die Antwort wird von Ricky G gegeben . 09. März '12 um 3:48 2012-03-09 03:48

Sie können diese großartige Funktion zum Hinzufügen von Tabellenzeilen von jQuery verwenden . Es funktioniert gut mit Tischen mit <tbody> , ist es aber nicht. Es berücksichtigt auch die Anzahl der letzten Zeilen der Tabelle.

Hier ist ein Anwendungsbeispiel:

 // One table addTableRow($('#myTable')); // add table row to number of tables addTableRow($('.myTables')); 
10
02 марта '09 в 16:21 2009-03-02 16:21 Die Antwort ist gegeben in Usbekistan 02. März 09 um 16:21 2009-03-02 16:21
  // 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); 
10
06 дек. Die Antwort wird von Pankaj Garg 06 Dez. gegeben. 2015-12-06 07:13 '15 am 7:13 2015-12-06 07:13

Neils Antwort ist definitiv die beste. Die Dinge werden jedoch sehr unordentlich. Mein Vorschlag war, Variablen zum Speichern von Elementen zu verwenden und sie der DOM-Hierarchie hinzuzufügen.

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); 
9
11 мая '14 в 15:04 2014-05-11 15:04 Die Antwort wird von GabrielOshiro 11. Mai '14 um 15:04 2014-05-11 15:04 gegeben

Ich fand dieses AddRow-Plugin sehr nützlich für die Verwaltung von Tabellenzeilen. Obwohl die Luke-Lösung am besten geeignet ist, wenn Sie nur eine neue Zeile hinzufügen müssen.

8
05 дек. Die Antwort gibt Vitalii Fedorenko 05 Dez. 2011-12-05 04:09 '11 am 4:09 2011-12-05 04:09
 <tr id="tablerow"></tr> $('#tablerow').append('<tr>...</tr><tr>...</tr>'); 
7
21 дек. Die Antwort lautet Vivek S 21 dec. 2013-12-21 14:54 '13 am 14:54 2013-12-21 14:54

Ich glaube, ich habe es in meinem Projekt gemacht, 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'); }); }); }); 
7
31 янв. die antwort wird gegeben SNEH PANDYA 31 jan. 2014-01-31 09:13 '14 am 9:13 2014-01-31 09:13

Dies ist der Hacking-Code für Hacking. Ich wollte die Zeichenkettenvorlage auf der HTML- Seite speichern. Die Zeilen der Tabelle 0 ... n werden zum Zeitpunkt der Anforderung angezeigt, und dieses Beispiel hat einen harten Codierungsstring und einen vereinfachten Musterstring. Die Vorlagentabelle ist ausgeblendet, und das Zeichenfolgen-Tag muss sich in einer gültigen Tabelle befinden. Andernfalls können Browser es aus der DOM- Struktur entfernen. Beim Hinzufügen einer Zeichenfolge wird der Bezeichner counter + 1 verwendet. Der aktuelle Wert wird im Datenattribut gespeichert. Dadurch wird sichergestellt, dass jede Zeile eindeutige URL- Parameter erhält.

Ich habe Tests mit Internet Explorer 8, Internet 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (mit Symbian 3), Android-Freigaben und Firefox-Betaversionen durchgeführt.

 <table id="properties"> <tbody> <tr> <th>Name</th> <th>Value</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 Albtraum nachdenken.

7
29 марта '13 в 0:51 2013-03-29 00:51 Die Antwort wird von Whome 29. März 13 um 0:51 Uhr 2013-03-29 00:51 gegeben
 <table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> <tr>...</tr> </table> 

Schreiben mit der Javascript-Funktion

 document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>'; 
7
19 янв. Antwort von Jakir Hossain am 19. Januar 2016-01-19 23:09 '16 am 23:09 PM 2016-01-19 23:09

Da ich auch eine Möglichkeit habe, endlich eine Zeichenfolge oder einen bestimmten Ort hinzuzufügen, denke ich, sollte ich auch Folgendes teilen:

Suchen Sie zuerst die Länge oder die Zeilen:

 var r=$("#content_table").length; 

und fügen Sie dann mit dem folgenden Code eine Zeile hinzu:

 $("#table_id").eq(r-1).after(row_html); 
6
20 мая '13 в 12:14 2013-05-20 12:14 Die Antwort wird von Jaid07 am 20. Mai 13 um 12:14 Uhr 2013-05-20 12:14 gegeben

Um diesem Thema ein gutes Beispiel hinzuzufügen, finden Sie hier eine funktionierende Lösung, wenn Sie einer bestimmten Position eine Zeile hinzufügen müssen.

Eine zusätzliche Zeile wird nach der 5. Zeile oder am Ende der Tabelle hinzugefügt, wenn die Anzahl der Zeilen weniger als 5 beträgt.

 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 lege den Inhalt in den fertigen (versteckten) Behälter unter den Tisch. Wenn Sie (oder der Designer) also ändern müssen, müssen Sie JS nicht bearbeiten.

 <table id="banner_holder" style="display:none;"> <tr> <td colspan="3"> <div class="wide-banner"></div> </td> </tr> </table> 
6
29 авг. die antwort ist gegeben d.raev 29 aug. 2013-08-29 14:35 '13 am 14:35 2013-08-29 14:35

Wenn Sie eine andere Variable haben, auf die Sie im <td> zugreifen können, versuchen Sie dies.

Also ich hoffe das wäre hilfreich

 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); 
6
14 окт. Die Antwort wird MEAbid 14 Oct gegeben. 2016-10-14 08:18 '16 um 08:18 Uhr 2016-10-14 08:18
 <table id=myTable> <tr><td></td></tr> <style="height=0px;" tfoot></tfoot> </table> 

Sie können die Fußzeilenvariable zwischenspeichern und den Zugriff auf das DOM reduzieren.

 var footer = $("#mytable tfoot") footer.before("<tr><td></td></tr>") 
6
13 апр. Antwort Pavel Shkleinik 13. April 2012-04-13 13:47 '12 um 13:47 2012-04-13 13:47

Das ist meine Entscheidung

 $('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>'); 
5
20 июля '17 в 5:34 2017-07-20 05:34 Die Antwort ist gegeben Daniel Ortegón 20. Juli 17 um 5:34 2017-07-20 05:34

Auf einfache Weise:

 $('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>'); 
5
16 июня '15 в 15:11 2015-06-16 15:11 Die Antwort wird von vipul sorathiya am 16. Juni '15 um 15:11 2015-06-16 15:11 gegeben

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-API für fnAddData- Datatables

5
02 окт. Die Antwort wird gegeben Praveena M 02 Okt. 2013-10-02 08:06 '13 am 8:06 2013-10-02 08:06
 $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 

fügt der ersten TBODY Tabelle eine neue Zeile TBODY , unabhängig davon, THEAD oder TFOOT . (Ich habe keine Informationen gefunden, aus welcher Version von jQuery .append() dieses Verhalten vorliegt.)

Sie können dies in den folgenden 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 der String ab nach 1 2 eingefügt, im zweiten Beispiel nicht nach 3 4 . Wenn die Tabelle leer war, erstellt jQuery einen TBODY für die neue Zeile.

5
19 апр. Antwort von Alexey Pavlov am 19. April 2012-04-19 13:53 '12 um 13:53 Uhr 2012-04-19 13:53

Wenn Sie eine row vor dem ersten untergeordneten Element <tr> hinzufügen möchten.

 $("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>"); 

Wenn Sie nach dem letzten Kind eine row hinzufügen möchten.

 $("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>"); 
4
16 марта '17 в 12:07 2017-03-16 12:07 Die Antwort wird von Sumon Sarker am 16. März 17 um 12:07 2017-03-03-16 12:07 gegeben
  • 1
  • 2

Andere Fragen zu Etiketten oder Ask a Question