Pridėti lentelės eilutę į jQuery

Koks yra geriausias būdas jQuery'e pridėti papildomą eilutę prie stalo kaip paskutinę eilutę?

Ar tai priimtina?

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

Ar yra kokių nors apribojimų, kuriuos galite pridėti prie tokios lentelės (pvz., Įvestys, pasirinkimai, eilučių skaičius)?

2182
05 окт. Darryl Hein nustatytas spalio 5 d 2008-10-05 00:33 '08 ne 0:33 2008-10-05 00:33
@ 33 atsakymai
  • 1
  • 2

Jūsų pasiūlytas metodas neužtikrina jums tbody rezultato - ką daryti, jei turėjote tbody , pavyzdžiui:

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

Jūs baigsite:

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

Todėl norėčiau rekomenduoti šį metodą:

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

Jūs galite įtraukti kažką after() metodo tol, kol jis galioja HTML, įskaitant kelias eilutes pagal aukščiau pateiktą pavyzdį.

Atnaujinti :. Pakartokite šį atsakymą po paskutinio darbo su šiuo klausimu. neatsakingumas pastebi, kad DOM visada bus tbody ; tai tiesa, bet tik tada, kai yra bent viena eilutė. Jei neturite styginių, nebus jokio tbody , nebent jūs patys nurodėte.

DaRKoN_ siūlo pridėti prie tbody o ne pridėti turinį po paskutinio tr . Tai kelia trūkstamų linijų problemą, tačiau vis dar nėra atsparus tbody , nes teoriškai galite turėti keletą tbody elementų ir kiekvienai iš jų bus pridėta eilutė.

Pasverdamas viską, nesu įsitikinęs, kad yra vienas vieno linijos sprendimas, kuriame atsižvelgiama į visus galimus scenarijus. Jums reikės įsitikinti, kad jQuery kodas atitinka jūsų žymėjimą.

Manau, kad saugiausias sprendimas tikriausiai yra užtikrinti, kad jūsų table visada turi bent vieną tbody savo žymėjime, net jei jis neturi eilučių. Remdamiesi tuo, galite naudoti šiuos veiksmus, kurie veiks, nepaisant to, kad turite kelias eilutes (taip pat atsižvelgdami į kelis tbody elementus):

 $('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>'); 
1961 m
05 окт. Atsakyti Luke Bennett Oct 05 2008-10-05 00:49 '08, 12:49 AM 2008-10-05 00:49

jQuery turi integruotą įrankį valdyti DOM elementus skristi.

Galite pridėti kažką prie savo stalo:

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

$('<some-tag>') Object“ $('<some-tag>') „jQuery“ yra žymos objektas, kuris gali turėti keletą attr atributų, kuriuos galima nustatyti ir gauti, taip pat text , kuris žymi tekstą tarp žymos čia: <tag>text</tag> .

Tai gana keista įtrauka, bet jums lengviau pamatyti, kas vyksta šiame pavyzdyje.

723
14 авг. atsakymas pateikiamas Neil 14 rug. 2009-08-14 18:30 '09, 6:30 val. 2009-08-14 18:30

Taigi viskas pasikeitė, nes @ Luke Bennett atsakė į šį klausimą. Štai atnaujinimas.

jQuery, nes 1.4 (?) versija automatiškai nustato, ar elementas, kurį bandote įterpti (naudodami bet kurį append() , prepend() , before() arba after() ), yra <tr> ir įterpiamas į pirmąjį <tbody> jūsų lentelėje arba perkelia jį į naują <tbody> , jei neegzistuoja.

Taigi, jūsų mėginio kodas yra priimtinas ir veiks gerai su 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 atsakymą Salmanas Abbasas pateikė birželio 12 d. 12 d. 23:12 2012-06-05 23:12

Ką daryti, jei turite <tbody> ir <tfoot> ?

Pavyzdžiui:

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

Tada jis įterpia naują eilutę į apačią, o ne į kūną.

Todėl geriausias sprendimas yra įtraukti <tbody> ir naudoti .append , o ne.

 $("#myTable > tbody").append("<tr><td>row content</td></tr>"); 
157
22 янв. atsakymas pateikiamas ChadT sausio 22 d 2009-01-22 09:47 '09 9:47 2009-01-22 09:47

Žinau, kad paprašėte „jQuery“ metodo. Stebėjau daug ir nustatėme, kad galime tai padaryti geriau nei tiesiogiai naudojant „JavaScript“ su šia funkcija.

 tableObject.insertRow(index) 

index yra sveikasis skaičius, nurodantis įterptos linijos padėtį (prasideda 0). Taip pat galite naudoti reikšmę -1; todėl nauja eilutė bus įtraukta į paskutinę poziciją.

Ši parinktis reikalinga „Firefox“ ir „ Opera“ , bet nebūtina „Internet Explorer“, „ Chrome“ ir „ Safari“ .

Jei šis parametras nėra insertRow() , insertRow() įterpia naują eilutę paskutinėje „Internet Explorer“ pozicijoje ir pirmajame „Chrome“ ir „Safari“ pozicijoje.

Tai bus naudinga bet kuriai priimtinai HTML lentelės struktūrai.

Toliau pateiktame pavyzdyje įterpiama eilutė į paskutinį (kaip indeksas naudojamas -1):

 <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> 

Tikiuosi, kad tai padės.

55
20 апр. atsakymą pateikė shashwat balandžio 20 d 2012-04-20 20:38 '12, 8:38 PM 2012-04-20 20:38

Aš rekomenduoju

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

skirtingai

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

Raktiniai žodžiai first ir last darbas atliekamas su pirmuoju ar paskutiniu žymekliu, kuris turėtų būti paleistas, o ne uždarytas. Taigi, ji atrodo geriau su įdėtomis lentelėmis, jei nenorite, kad įdėtos lentelės būtų pakeistos ir vietoj to pridėtos prie bendrosios lentelės. Bent tai, ką radau.

 <table id=myTable> <tbody id=first> <tr><td> <table id=myNestedTable> <tbody id=last> </tbody> </table> </td></tr> </tbody> </table> 
33
23 окт. Curtor 23 d. atsakymas 2010-10-23 00:34 '10 0:34 2010-10-23 00:34

Mano nuomone, greičiausias ir intuityviausias būdas -

 //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>'); 

čia yra smuikų demonstracija

Taip pat galiu rekomenduoti mažą funkciją, kad būtų galima atlikti daugiau HTML pakeitimų.

 //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] : ''; }); } }()); 

Jei naudosite savo styginių kompozitorių, galite tai padaryti

 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' })); 

Čia yra penkiolika demo

30
30 июня '14 в 15:40 2014-06-30 15:40 atsakymas suteiktas sulest birželio 30 d., 14 val. 15:40 2014-06-30 15:40

Tai galima padaryti lengvai naudojant funkciją jQuery "last ()".

 $("#tableId").last().append("<tr><td>New row</td></tr>"); 
23
26 янв. Atsakymas duotas Nischal 26 sausio. 2010-01-26 16:34 '10, 16:34, 2010-01-26 16:34

Naudoju šį metodą, kai lentelėje nėra eilutės, ir kiekviena eilutė yra gana sudėtinga.

style.css:

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

xxx.html

 ... <tr id="templateRow"> ... </tr> ... $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() ); ... 
17
16 дек. Atsakymą pateikė Dominic 16 dec. 2010-12-16 08:30 „10, 08:30, 2010-12-16 08:30

Jei norite rasti geresnį sprendimą, jei paskutinėje eilutėje yra įdėtos lentelės, nauja eilutė bus įtraukta į įdėtą lentelę vietoj pagrindinės lentelės. Greitas taisymas (įskaitant lenteles su / be kėbulo ir lentelių su įdėtomis lentelėmis):

 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); } } 

Naudojimo pavyzdys:

 add_new_row('#myTable','<tr><td>my new row</td></tr>'); 
14
22 янв. Atsakymas pateikiamas Oshua sausio 22 d 2011-01-22 01:21 '11 at 1:21 2011-01-22 01:21

Bandant įterpti lentelės eilutę po paspaudusios eilutės, turėjau problemų. Viskas gerai, išskyrus tai, kad paskutinis () pokalbis neveikia paskutinei eilutei.

 $('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml); 

Aš nusileidžiau su labai netvarkingu sprendimu:

Sukurkite lentelę taip (kiekvienos eilutės ID):

 <tr id="row1"> ... </tr> <tr id="row2"> ... </tr> <tr id="row3"> ... </tr> 

ir pan

ir tada:

 $('#traffic tbody').find('tr.trafficBody' + idx).after(html); 
13
05 окт. Avron Olshewsky atsakė į spalį 05 2009-10-05 22:17 '09, 10:17 val. 2009-10-05 22:17

Aš taip nusprendžiau.

„Jquery“ naudojimas

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

ištrauka

 <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 окт. Atsakyti Anton vBR 12 oct. 2017-10-12 20:54 '17, 08:54 pm 2017-10-12 20:54

Mano sprendimas:

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

naudoti:

 $('#Table').addNewRow(id1); 
10
09 марта '12 в 3:48 2012-03-09 03:48 atsakymą pateikė Ricky G, kovo 09 '12, 3:48 2012-03-09 03:48

Galite naudoti šią puikią „ jQuery“ lentelės eilutės funkciją. Jis puikiai veikia su lentelėmis su <tbody> , bet ne. Jame taip pat atsižvelgiama į paskutinių lentelės eilučių skaičių.

Čia pateikiamas naudojimo pavyzdys:

 // One table addTableRow($('#myTable')); // add table row to number of tables addTableRow($('.myTables')); 
10
02 марта '09 в 16:21 2009-03-02 16:21 atsakymas pateikiamas Uzbekjonas kovo 02'09 , 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 дек. Atsakymą pateikė Pankaj Garg. 2015-12-06 07:13 '15, 7:13 2015-12-06 07:13

Neilo atsakymas tikrai yra geriausias. Tačiau viskas tampa labai nepatogus. Mano pasiūlymas buvo naudoti kintamuosius elementams išsaugoti ir įtraukti juos į DOM hierarchiją.

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 atsakymą pateikė GabrielOshiro gegužės 11, 14 d. 15:04 2014-05-11 15:04

Radau, kad šis „ AddRow“ įskiepis labai naudingas valdant stalo eilutes. Nors „Luke“ sprendimas geriausiai tinka, jei jums reikia tiesiog pridėti naują eilutę.

8
05 дек. atsakymą pateikė Vitalii Fedorenko 05 d. 2011-12-05 04:09 '11 at 4:09 2011-12-05 04:09
 <tr id="tablerow"></tr> $('#tablerow').append('<tr>...</tr><tr>...</tr>'); 
7
21 дек. Atsakymas suteikiamas Vivek S 21 d. 2013-12-21 14:54 '13, 14:54, 2013-12-21 14:54

Manau, kad padariau savo projektą, čia yra:

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 янв. atsakymas pateikiamas SNEH PANDYA 31 d. 2014-01-31 09:13 '14 at 9:13 2014-01-31 09:13

Tai įsilaužimo kodas. Norėjau išsaugoti eilutės šabloną HTML puslapyje. Lentelės 0 ... n eilutės rodomos prašymo pateikimo metu, o šiame pavyzdyje yra viena kieta kodavimo eilutė ir supaprastinta modelio eilutė. Šablono lentelė yra paslėpta, o eilutės žyma turi būti galiojančioje lentelėje arba naršyklės gali ją pašalinti iš DOM medžio. Įrašant eilutę naudojamas identifikatoriaus skaitiklis + 1, o dabartinė vertė yra saugoma duomenų atribute. Jis užtikrina, kad kiekviena eilutė gautų unikalius URL parametrus.

Bandžiau atlikti „Internet Explorer 8“, „Internet 9“, „Firefox“, „Chrome“, „Opera“, „ Nokia Lumia 800“ , „ Nokia C7“ („ Symbian 3“), „Android“ akcijas ir „Firefox“ beta versijas.

 <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: aš duodu visus kreditus jQuery komandai; jie nusipelno visko. „JavaScript“ programavimas be „jQuery“ - aš net nenoriu galvoti apie šį košmarą.

7
29 марта '13 в 0:51 2013-03-29 00:51 atsakymą pateikė „ Whome“ kovo 29 d., 13 d. 0:51 2013-03-29 00:51
 <table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> <tr>...</tr> </table> 

Rašymas su „JavaScript“ funkcija

 document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>'; 
7
19 янв. Jakir Hossain atsakymas dėl 19 d 2016-01-19 23:09 '16 at 23:09 PM 2016-01-19 23:09

Kadangi aš taip pat galiu pridėti eilutę paskutiniu ar tam tikra konkrečia vieta, manau, kad taip pat turėčiau pasidalinti šiuo:

Pirma, raskite ilgį arba eilutes:

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

tada naudokite žemiau esantį kodą, kad pridėtumėte eilutę:

 $("#table_id").eq(r-1).after(row_html); 
6
20 мая '13 в 12:14 2013-05-20 12:14 atsakymą pateikė Jaid07 gegužės 20 d. 13:14 2013-05-20 12:14

Jei norite pridėti gerą šios temos pavyzdį, čia rasite darbo sprendimą, jei reikia pridėti eilutę prie konkrečios pozicijos.

Papildoma eilutė pridedama po penktos eilutės arba lentelės pabaigoje, jei eilučių skaičius yra mažesnis nei 5.

 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); } 

Aš įdėjau į baigtą (paslėptą) konteinerį po stalu. Taigi, jei jums (ar dizaineriui) reikia keisti, nereikia redaguoti JS.

 <table id="banner_holder" style="display:none;"> <tr> <td colspan="3"> <div class="wide-banner"></div> </td> </tr> </table> 
6
29 авг. atsakymas pateiktas d.raev 29 rug . 2013-08-29 14:35 '13, 14:35, 2013-08-29 14:35

jei turite kitą kintamąjį, prie kurio galite pasiekti <td> , pabandykite tai padaryti.

Taigi, tikiuosi, kad tai būtų naudinga

 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 окт. Atsakymas pateikiamas MEAbid 14 okt. 2016-10-14 08:18 '16 at 8:18 am 2016-10-14 08:18
 <table id=myTable> <tr><td></td></tr> <style="height=0px;" tfoot></tfoot> </table> 

Galite išsaugoti poraštės kintamąjį ir sumažinti prieigą prie DOM (Pastaba: vietoj poraštės gali būti geriau naudoti netikrą eilutę).

 var footer = $("#mytable tfoot") footer.before("<tr><td></td></tr>") 
6
13 апр. Atsakyti Pavel Shkleinik balandžio 13 2012-04-13 13:47 '12, 13:47, 2012-04-13 13:47

Tai mano sprendimas

 $('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>'); 
5
20 июля '17 в 5:34 2017-07-20 05:34 atsakymas duotas Daniel Ortegón liepos 20 d. 17, 5:34 2017-07-20 05:34

Paprastai:

 $('#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 atsakymą pateikė vipul sorathiya birželio 16, 15, 15:11 2015-06-16 15:11

Jei naudojate „Datatable JQuery“ papildinį, galite pabandyti.

 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); 

Žr. „Datatables fnAddData Datatables API“

5
02 окт. Atsakymas pateikiamas Praveena M 02 okt. 2013-10-02 08:06 '13, 08:06 2013-10-02 08:06
 $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 

į pirmą TBODY lentelę pridės naują eilutę, nepriklausomai nuo THEAD arba TFOOT . ( .append() informacijos, nuo kurios jQuery .append() versijos šis elgesys yra.)

Galite tai išbandyti šiuose pavyzdžiuose:

 <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> 

Pavyzdžiui, po 1 2 įrašoma eilutė ab , o antrajame pavyzdyje - ne po 3 4 . Jei lentelė buvo tuščia, jQuery sukuria TBODY naujai eilutei.

5
19 апр. Alexey Pavlov atsakymas 19 d 2012-04-19 13:53 '12, 13:53 pm 2012-04-19 13:53

Jei norite pridėti row prieš pirmąjį vaikų elementą <tr> .

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

Jei po paskutinio vaiko <tr> norite pridėti row .

 $("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>"); 
4
16 марта '17 в 12:07 2017-03-16 12:07 atsakymą davė Sumon Sarker kovo 17 d. 17 val. 12:07 2017-03-03-16 12:07
  • 1
  • 2

Kiti klausimai apie „ etiketes arba užduoti klausimą