JQuery üçün masa satırını əlavə edin

JQuery-də ən yaxşı üsul nədir?

Bu qəbul edilə bilərmi?

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

Bu kimi bir masaya əlavə edə biləcək hər hansı bir məhdudiyyət varmı (məsələn, girişlər, seçimlər, satırlar sayı)?

2171
05 окт. Darryl Hein 05 oktyabr 2008-10-05 00:33 '08 at 0:33 2008-10-05 00:33
@ 32 cavab
  • 1
  • 2

Təklif etdiyimiz yanaşma, aradığınız nəticəni verməyinizə zəmanət vermir - məsələn, bir tbody varsa:

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

Aşağıdakılarla sona çatacaqsınız:

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

Buna görə mən bu yanaşmanı tövsiyə edirəm:

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

Aşağıdakı nümunəyə görə bir neçə xətt daxil olmaqla, HTML üçün etibarlı after() metodunda bir şey əlavə edə bilərsiniz.

Yeniləmə :. Bu cavabı son işdən sonra bu sualı təkrarlayın. məsuliyyətsizlik xəbərdarlıqları hər zaman tbody olacaq; bu, doğrudur, ancaq ən azı bir xətt varsa. tbody yoxdursa, özünüz göstərmədiyiniz təqdirdə, heç bir şey yoxdur.

DaRKoN_ son tr sonra məzmun əlavə etmək əvəzinə tene əlavə etməyi təklif edir . Bu, itkin xətlərin problemini qaldırır, amma hələ də bulletproof deyildir, çünki nəzəriyyədə bir neçə element var və hər birinə bir xətt əlavə olunacaq.

Hər şeyi tartışaraq, mən əminəm ki, mümkün olan hər bir ssenariyi nəzərə alan birtərəfli bir həll var. JQuery kodunun markalanma ilə uyğun olduğundan əmin olmalısınız.

Hesab edirəm ki, ən təhlükəsiz həll yolu, tbody olmasa belə, tbody hər zaman ən azı bir tbody daxil etdiyini təmin etməkdir. Buna əsasən bir neçə xətt olduğunuza baxmayaraq (aşağıda qeyd olunan bir neçə elementləri nəzərə alaraq) işləyən aşağıdakılardan istifadə edə bilərsiniz:

 $('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>'); 
1952
05 окт. Cavab Luke Bennett Oct 05 2008-10-05 00:49 '08 at 12:49 2008-10-05 00:49

jQuery DOM elementlərini idarə etmək üçün quraşdırılmış bir alətə malikdir.

Masanıza belə bir şey əlavə edə bilərsiniz:

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

JQuery $('<some-tag>') obyekti $('<some-tag>') burada müəyyənləşdirilmiş və əldə edilə bilən bir neçə attr sahib ola bilən tag obyekti, eləcə də burada etiketin mətni təmsil edən mətndir: <tag>text</tag> .

Bu olduqca qəribə bir girintidir, ancaq bu nümunədə nə olduğunu görmək daha asandır.

721
14 авг. cavab Neil 14 aug tərəfindən verilir . 2009-08-14 18:30 '09 saat 18:30 'da 2009-08-14 18:30

@Luke Bennett bu suala cavab verdikdən sonra hər şey dəyişdi. Burada yeniləmə.

Sürüm 1.4 (?) avtomatik olaraq append() , prepend() , before() və ya after() hər hansı bir elementi istifadə etməyə çalışdığınızı avtomatik olaraq müəyyən edir və <tr> <tbody> masaüstünüzde ya da yeni bir <tbody> , əgər yoxdur.

Belə ki, nümunə kodu məqbul və jQuery 1.4 + ilə yaxşı işləyəcək ;;)

 $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 
288
05 июня '12 в 23:12 2012-06-05 23:12 Cavab Salman Abbas tərəfindən 05 iyun 2012-ci il saat 23:12 'da verilir. 2012-06-05 23:12

<tbody><tfoot> nədir?

Məsələn:

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

Sonra bədənə deyil, altıncıya yeni bir xətt əlavə edir.

Buna görə də, ən yaxşı həll <tbody> və istifadə etməkdir .append deyil.

 $("#myTable > tbody").append("<tr><td>row content</td></tr>"); 
157
22 янв. cavab ÇadT 22 yanvar verilir 2009-01-22 09:47 '09 da 9:47 'da 2009-01-22 09:47

JQuery metodu üçün xahiş etdiyinizi bilirəm. Mən bir çoxu izlədim və biz JavaScript funksiyasını birbaşa aşağıdakı funksiyadan istifadə edərək daha yaxşı edə biləcəyimizi gördük.

 tableObject.insertRow(index) 

index əlavə etmək üçün xəttin mövqeyini göstərən bir tamsayıdır (0 ilə başlayır). Siz də -1 dəyərini istifadə edə bilərsiniz; nəticədə yeni xətt son vəziyyətə gətiriləcək.

Bu seçim Firefox və Opera'da tələb olunur, lakin Internet Explorer, ChromeSafari- də tələb olunmur.

Bu parametre insertRow() deyilsə, insertRow() Internet Explorer-da və Chrome və Safari-də ilk mövqedə yeni bir satır əlavə edir.

Bu, hər hansı bir məqbul HTML stolu strukturu üçün işləyəcək.

Aşağıdakı misal sonuncu (-1 indeks kimi istifadə olunur) bir simli əlavə edər:

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

Ümid edirəm ki, bu kömək edir.

Üçüncü tərəf redaktə

Yuxarıdakı kod tr əlavə edir; əlavə etməli olduğunuz məzmunu və s. HTMLTableElement.insertRow() alındı HTMLTableElement.insertRow()

 function addRow(tableID) { // Get a reference to the table let tableRef = document.getElementById(tableID); // Insert a row at the end of the table let newRow = tableRef.insertRow(-1); // Insert a cell in the row at index 0 let newCell = newRow.insertCell(0); // Append a text node to the cell let newText = document.createTextNode('New bottom row'); newCell.appendChild(newText); } // Call addRow() with the table ID addRow('my-table'); 
54
20 апр. cavab şaşwat 20 aprel verilir 2012-04-20 20:38 '12 at 20:38 PM 2012-04-20 20:38

Tövsiyə edirəm

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

fərqlidir

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

Açar sözlər, first və ya last işdə, bağlanılmaması lazım olan ilk və ya son etiketdə işləyir. Daxili tablonun dəyişdirilməsini istəmirsinizsə və bunun əvəzinə ümumi masa əlavə olunarsa, yuva masaları ilə daha yaxşı görünür. Ən azı mən tapdığım şey.

 <table id=myTable> <tbody id=first> <tr><td> <table id=myNestedTable> <tbody id=last> </tbody> </table> </td></tr> </tbody> </table> 
33
23 окт. Cavabın verdiyi cavab Oct 23 2010-10-23 00:34 '10 at 0:34 2010-10-23 00:34

Mənim fikrimcə, ən sürətli və ən intuitiv yol -

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

Burada bir fiddle demo var

Daha çox HTML dəyişiklikləri etmək üçün kiçik bir xüsusiyyət də təklif edə bilərəm.

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

Mənim simli bəstəkarımdan istifadə edərsənsə, bunu edə bilərsiniz

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

İşdə bir fiddle demosu var

30
30 июня '14 в 15:40 2014-06-30 15:40 Cavab sulest 30 iyun '14 saat 15:40 'də verildi 2014-06-30 15:40

Bu, jQuery "last ()" funksiyasından istifadə edərək asanlıqla edilə bilər.

 $("#tableId").last().append("<tr><td>New row</td></tr>"); 
23
26 янв. Cavab Nisçal 26 yanvar verilir . 2010-01-26 16:34 '10 'da 16:34' da 2010-01-26 16:34

Masada heç bir sıra olmadığında bu üsuldan istifadə edirəm və hər bir sıra olduqca mürəkkəbdir.

style.css:

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

xxx.html

 ... <tr id="templateRow"> ... </tr> ... $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() ); ... 
17
16 дек. Cavab Dominic 16 dekabrda verilir. 2010-12-16 08:30 '10 saat 08:30 'da 2010-12-16 08:30

Buraya yerləşdirilən daha yaxşı bir həll üçün, sonuncu sətirdə iç içə bir masa varsa, yeni satır əsas masanın yerinə yerləşmiş masaya əlavə olunacaq. Hızlı düzeltme (masa içi / masa içərisində olan və / və ya masalar ilə masalar daxil olmaqla):

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

İstifadə nümunəsi:

 add_new_row('#myTable','<tr><td>my new row</td></tr>'); 
14
22 янв. Cavab Oşuya 22 yanvarda verilir 2011-01-22 01:21 '11 1:21 2011-01-22 01:21

Bir tıklanan satırdan sonra bir masa satırını əlavə etməyə çalışarkən bəzi problemlərim var idi. Hər şey yaxşıdır, axırıncı () çağırışı sonuncu xətt üçün işləmir.

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

Çox həlledici bir həll yola düşdüm:

Aşağıdakı kimi bir masa yaradın (hər bir sıra üçün id):

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

və s

və sonra:

 $('#traffic tbody').find('tr.trafficBody' + idx).after(html); 
13
05 окт. Avron Olşevski oktyabr 05- ə cavab verdi 2009-10-05 22:17 '09 at 10:17 pm 2009-10-05 22:17

Mən bunu qərar verdim.

Jquery istifadə

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

çıxarış

 <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 окт. Cavab Anton vBR 12 okt . 2017-10-12 20:54 '17 saat 20:54 'də 2017-10-12 20:54
  // 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 дек. Cavab Pankaj Garg tərəfindən verilir 06 Dekabr. 2015-12-06 07:13 '15 'da 7:13' de, 2015-12-06 07:13

Bu böyük jQuery əlavə masa satır xüsusiyyətini istifadə edə bilərsiniz. <tbody> ilə masalar ilə yaxşı işləyir, amma deyil. Bu da masanın son satırlarının sayını nəzərə alır.

Burada istifadə nümunəsi:

 // One table addTableRow($('#myTable')); // add table row to number of tables addTableRow($('.myTables')); 
10
02 марта '09 в 16:21 2009-03-02 16:21 Cavab Özbəkistan'a 02 mart 2009 - cu il saat 16: 00 -da verilir

Mənim həllim:

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

istifadə edin:

 $('#Table').addNewRow(id1); 
10
09 марта '12 в 3:48 2012-03-09 03:48 Cavab Ricky G tərəfindən 09 mart '12 saat 03:48 'da verilir

Neilin cavabı mütləq yaxşıdır. Ancaq hər şey çox dəhşətli olur. Mənim təkliflər elementləri saxlamaq və onları DOM hiyerarxiyasına əlavə etmək üçün dəyişənlərdən istifadə etmək idi.

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 cavab GabrielOshiro tərəfindən verilir May 11, '14 at 15:04 2014-05-11 15:04

Masa satırlarını idarə etmək üçün olduqca faydalı olan bu AddRow pluginini tapdım . Əgər yeni bir xətt əlavə etməlisinizsə Luka həlli ən uyğun olardı.

8
05 дек. Cavab Vitalii Fedorenko tərəfindən verilir 05 dekabr . 2011-12-05 04:09 '11 at 4:09 2011-12-05 04:09
 <table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> <tr>...</tr> </table> 

Javascript funksiyası ilə yazma

 document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>'; 
7
19 янв. 19 yanvarda Jakir Hossain tərəfindən verilmiş cavab 2016-01-19 23:09 '16 at 11:09 PM 2016-01-19 23:09
 <tr id="tablerow"></tr> $('#tablerow').append('<tr>...</tr><tr>...</tr>'); 
7
21 дек. Cavab Vivek S 21 dekabr verilir. 2013-12-21 14:54 '13 'da 14:54 2013-12-21 14:54

Mən layihəmdə etdiyimi düşünürəm, budur:

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 янв. Cavab SNEH PANDYA 31 yanvar verilir. 2014-01-31 09:13 '14 'da 9:13 2014-01-31 09:13

Hacking üçün hackacking kodudur. Şablon şablonunu HTML səhifəsində saxlamaq istədim. Cədvəlin 0 ... n sətri istək zamanı göstərilir və bu nümunədə bir sabit kodlama simli və sadələşdirilmiş naxış simli var. Şablon masası gizlidir və simli etiketi düzgün bir masada olmalıdır və ya brauzerlər DOM ağacından çıxara bilər. Bir simli əlavə et identifikator sayacını + 1 istifadə edir və cari dəyər data xüsusiyyətində saxlanılır. Hər bir xəttin unikal URL parametrlərini əldə etməsini təmin edir.

Internet Explorer 8, İnternet 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 ( Symbian 3 ilə), Android səhmləri və Firefox beta versiyalarında testlər keçirdim.

 <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: Bütün kreditləri jQuery komandasına verirəm; hər şeyə layiqdirlər. JQuery olmadan JavaScript proqramlaşdırma - hətta bu kabus haqqında düşünmək istəmirəm.

7
29 марта '13 в 0:51 2013-03-29 00:51 cavab 29 iyun 2013 -cü ildə 0:51 Whome tərəfindən verilmişdir

Sonda və ya müəyyən bir yerə bir simli əlavə etmək üçün bir yol var, buna görə də mən də bunu paylaşmalıyam:

Birincisi, uzunluğu və ya xəttləri tapın:

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

bir xətt əlavə etmək üçün aşağıdakı kodu istifadə edin:

 $("#table_id").eq(r-1).after(row_html); 
6
20 мая '13 в 12:14 2013-05-20 12:14 Cavab Jaid07 tərəfindən verildi 20 May 'da 12:14 2013-05-20 12:14

Bu mövzuya yaxşı bir nümunə əlavə etmək üçün, müəyyən bir mövqedə bir xətt əlavə etməlisinizsə, burada işləyən bir həll var.

Satırların sayı 5-dən az olduqda, əlavə bir sıra 5-ci sıra və ya tablonun sonunda əlavə edilir.

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

Məzmunu masanın altında hazırlanmış (gizli) konteynerə qoyuram. Belə ki, (və ya dizayner) dəyişdirmək lazımdır, əgər JS redaktə etmək lazım deyil.

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

<td> daxil oluna biləcəyiniz bir dəyişən varsa, bunu cəhd edin.

Yəni ümid edirəm ki, bu, faydalı olardı

 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 окт. Cavab MEAbid 14 oct verilir . 2016-10-14 08:18 '16 'da 8:18 ' də 2016-10-14 08:18 'də
 <table id=myTable> <tr><td></td></tr> <style="height=0px;" tfoot></tfoot> </table> 

Footer dəyişənini önbelleğe ala və DOM-a daxil olmaq imkanını azalda bilər (Qeyd: footer yerinə saxta xəttdən istifadə etmək daha yaxşı ola bilər).

 var footer = $("#mytable tfoot") footer.before("<tr><td></td></tr>") 
6
13 апр. Cavab Pavel Shkleinik Apr 13 2012-04-13 13:47 '12 at 13:47 2012-04-13 13:47
 $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 

THEAD ya TFOOT varlığından asılı olmayaraq ilk TBODY masasına yeni bir sıra əlavə edəcək. ( .append() hansı versiyasından olan məlumatı tapmadım .append() bu davranışın mövcud olduğunu.)

Bunu aşağıdakı nümunələrdə sına bilərsiniz:

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

Nə misalda, bətn ab 1 2 -dən sonra, ikinci nümunədə isə 3 4 -də deyil. Masa boş olduqda, jQuery yeni satır üçün bir TBODY yaradır.

5
19 апр. Aleksey Pavlov tərəfindən 19 apreldə cavab verildi 2012-04-19 13:53 '12 at 13:53 pm 2012-04-19 13:53

Sadə bir şəkildə:

 $('#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 Cavab vipul sorathiya tərəfindən verilir 16 iyun '15, 15:11 'də 2015-06-16 15:11

Bu mənim qərarımdır

 $('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>'); 
5
20 июля '17 в 5:34 2017-07-20 05:34 Cavab verilmişdir Daniel Ortegón, 20 İyun 20 'də 5:34 2017-07-20 05:34

Datatable JQuery plugin istifadə edirsinizsə, cəhd edə bilərsiniz.

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

Datatables fnAddData Datatables API-a baxın

5
02 окт. Cavab Praveena M 02 oktyabrda verilir . 2013-10-02 08:06 '13 'da 8:06' da 2013-10-02 08:06

İlk uşaq elementi <tr> əvvəl bir row əlavə etmək istəyirsinizsə.

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

<tr> son uşaqdan sonra bir row əlavə etmək istəyirsinizsə.

 $("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>"); 
4
16 марта '17 в 12:07 2017-03-16 12:07 Cavab Sumon Sarker tərəfindən 16 Mart '17 'də saat 12:07' də veriləcək
  • 1
  • 2

yazıları ilə bağlı digər suallar və ya bir sual