Tambahkan baris tabel ke jQuery

Apa metode terbaik di jQuery untuk menambahkan baris tambahan ke tabel sebagai baris terakhir?

Apakah ini dapat diterima?

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

Apakah ada batasan pada apa yang dapat Anda tambahkan ke tabel seperti ini (misalnya, input, pilihan, jumlah baris)?

2182
05 окт. Darryl Hein ditetapkan pada 05 Oktober 2008-10-05 00:33 '08 pada 0:33 2008-10-05 00:33
@ 33 jawaban
  • 1
  • 2

Pendekatan yang Anda usulkan tidak dijamin memberi Anda hasil yang Anda cari - bagaimana jika Anda memiliki badan, misalnya:

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

Anda akan berakhir dengan yang berikut:

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

Karena itu, saya akan merekomendasikan pendekatan ini:

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

Anda dapat memasukkan sesuatu dalam metode after() selama valid untuk HTML, termasuk beberapa baris sesuai dengan contoh di atas.

Perbarui :. U>

DaRKoN_ menyarankan untuk menambahkan ke tbody alih-alih menambahkan konten setelah tr terakhir. Ini menimbulkan masalah garis yang hi>tbody dan garis akan ditambahkan ke masing-masing.

Setelah menimbang semuanya, saya tidak yakin bahwa ada satu solusi single-line yang memperhitungkan setiap skenario yang mungkin. Anda harus memastikan bahwa kode jQuery cocok dengan markup Anda.

Saya pikir solusi teraman mungkin untuk memastikan bahwa table Anda selalu menyertakan setidaknya satu tbody di markup Anda, bahkan jika itu tidak memiliki baris. Berdasarkan ini, Anda dapat menggunakan yang berikut ini, yang akan berfungsi, terlepas dari kenyataan bahwa Anda memiliki beberapa baris (serta memperhitungkan beberapa elemen tbody ):

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

jQuery memiliki alat bawaan untuk mengelola elemen DOM dengan cepat.

Anda dapat menambahkan sesuatu ke meja Anda seperti ini:

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

$('<some-tag>') Object $('<some-tag>') di jQuery adalah objek tag yang dapat memiliki beberapa atribut attr yang dapat diatur dan diambil, serta text , yang mewakili teks antara tag di sini: <tag>text</tag> .

Ini adalah indentasi yang agak aneh, tetapi lebih mudah bagi Anda untuk melihat apa yang terjadi dalam contoh ini.

723
14 авг. jawabannya diberikan oleh Neil 14 Agustus. 2009-08-14 18:30 '09 pada pukul 6:30 sore 2009-08-14 18:30

Jadi semuanya telah berubah sejak @Luke Bennett menjawab pertanyaan ini. Ini pembaruannya.

jQuery, karena versi 1.4 (?) secara otomatis menentukan apakah elemen yang Anda coba masukkan (menggunakan salah satu append() , prepend() , before() , atau after() ) adalah <tr> dan memasukkannya ke yang pertama <tbody> di tabel Anda atau transfer ke <tbody> , jika tidak ada.

Jadi, kode sampel Anda dapat diterima dan akan berfungsi dengan baik dengan 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 jawabannya diberikan oleh Salman Abbas pada 05 Juni '12 pada 23:12 2012-06-05 23:12

Bagaimana jika Anda memiliki <tbody> dan <tfoot> ?

Sebagai contoh:

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

Kemudian ia memasukkan baris baru ke dalam footer, bukan ke dalam tubuh.

Karenanya, solusi terbaik adalah memasukkan <tbody> dan menggunakan .append , bukan .after .

 $("#myTable > tbody").append("<tr><td>row content</td></tr>"); 
157
22 янв. jawabannya diberikan ChadT 22 Jan 2009-01-22 09:47 '09 pada 9:47 2009-01-22 09:47

Saya tahu Anda meminta metode jQuery. Saya banyak menonton dan menemukan bahwa kami bisa melakukannya lebih baik daripada >

 tableObject.insertRow(index) 

index adalah bi>

Opsi ini diperlukan di Firefox dan Opera , tetapi tidak diperlukan di Internet Explorer, Chrome dan Safari .

Jika parameter ini bukan insertRow() , insertRow() menyisipkan baris baru di posisi terakhir di Internet Explorer dan di posisi pertama di Chrome dan Safari.

Ini akan berfungsi untuk setiap struktur tabel HTML yang dapat diterima.

Contoh berikut menyisipkan string ke yang terakhir (-1 digunakan sebagai indeks):

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

Saya harap ini membantu.

55
20 апр. jawabannya diberikan oleh shashwat 20 Apr 2012-04-20 20:38 '12 pada 20:38 2012-04-20 20:38

Saya merekomendasikan

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

tidak seperti

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

Kata kunci first dan last berfungsi pada tag pertama atau terakhir yang harus dijalankan, bukan ditutup. Dengan demikian, ini terlihat lebih baik dengan tabel bersarang jika Anda tidak ingin tabel bersarang diubah dan bukannya ditambahkan ke tabel umum. Setidaknya itulah yang saya temukan.

 <table id=myTable> <tbody id=first> <tr><td> <table id=myNestedTable> <tbody id=last> </tbody> </table> </td></tr> </tbody> </table> 
33
23 окт. balasan yang diberikan oleh Curtor 23 Okt 2010-10-23 00:34 '10 pada 0:34 2010-10-23 00:34

Menurut pendapat saya, cara tercepat dan paling intuitif -

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

ada demo biola di sini

Saya juga dapat merekomendasikan fitur kecil untuk membuat lebih banyak perubahan HTML.

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

Jika Anda menggunakan komposer string saya, Anda dapat melakukannya seperti

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

Ini demo biola

30
30 июня '14 в 15:40 2014-06-30 15:40 balasan diberikan sulest 30 Juni, '14 pukul 15:40 2014-06-30 15:40

Ini dapat dilakukan dengan mudah menggunakan fungsi jQuery "last ()".

 $("#tableId").last().append("<tr><td>New row</td></tr>"); 
23
26 янв. Jawabannya diberikan Nischal 26 Januari. 2010-01-26 16:34 '10 pada 16:34 2010-01-26 16:34

Saya menggunakan metode ini ketika tidak ada baris dalam tabel, dan setiap baris cukup kompleks.

style.css:

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

xxx.html

 ... <tr id="templateRow"> ... </tr> ... $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() ); ... 
17
16 дек. Jawabannya diberikan oleh Dominic 16 des. 2010-12-16 08:30 '10 jam 8:30 pagi 2010-12-16 08:30

Untuk solusi yang lebih baik ditempatkan di sini, jika ada tabel bersarang di baris terakhir, baris baru akan ditambahkan ke tabel bersarang alih-alih tabel utama. Perbaikan cepat (termasuk tabel dengan / tanpa tbody dan tabel dengan tabel bersarang):

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

Contoh penggunaan:

 add_new_row('#myTable','<tr><td>my new row</td></tr>'); 
14
22 янв. Jawabannya diberikan Oshua 22 Jan 2011-01-22 01:21 '11 pada 1:21 2011-01-22 01:21

Saya memiliki beberapa masalah terkait ketika mencoba memasukkan baris tabel setelah baris yang diklik. Semuanya baik-baik saja, kecuali bahwa panggilan .after () tidak berfungsi untuk baris terakhir.

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

Saya mendarat dengan solusi yang sangat tidak rapi:

Buat tabel sebagai berikut (id untuk setiap baris):

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

dan seterusnya

dan kemudian:

 $('#traffic tbody').find('tr.trafficBody' + idx).after(html); 
13
05 окт. Avron Olshewsky menjawab 05 Okt 2009-10-05 22:17 '09 jam 10:17 malam 2009-10-05 22:17

Saya memutuskan seperti itu.

Menggunakan jquery

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

kutipan

 <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 окт. Balas Anton vBR 12 Oktober. 2017-10-12 20:54 '17 jam 8:54 malam 2017-10-12 20:54

Solusi saya:

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

gunakan:

 $('#Table').addNewRow(id1); 
10
09 марта '12 в 3:48 2012-03-09 03:48 jawabannya diberikan oleh Ricky G 09 Maret '12 di 3:48 2012-03-09 03:48

Anda dapat menggunakan fitur jQuery add table row . Ini berfungsi baik dengan tabel dengan <tbody> , tetapi tidak. Ini juga memperhitungkan jumlah baris terakhir dari tabel.

Berikut ini contoh penggunaannya:

 // One table addTableRow($('#myTable')); // add table row to number of tables addTableRow($('.myTables')); 
10
02 марта '09 в 16:21 2009-03-02 16:21 jawabannya diberikan Uzbekjon 02 Maret 09 di 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 дек. Jawabannya diberikan oleh Pankaj Garg 06 Des. 2015-12-06 07:13 '15 pada 7:13 2015-12-06 07:13

Jawaban Neil jelas yang terbaik. Namun, semuanya menjadi sangat berantakan. Saran saya adalah menggunakan variabel untuk menyimpan elemen dan menambahkannya ke hierarki DOM.

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 jawabannya diberikan oleh GabrielOshiro 11 Mei '14 pada 15:04 2014-05-11 15:04

Saya menemukan plugin AddRow ini cukup berguna untuk mengelola baris tabel. Meskipun solusi Luke akan paling cocok jika Anda hanya perlu menambahkan baris baru.

8
05 дек. jawabannya diberikan oleh Vitalii Fedorenko 05 Desember. 2011-12-05 04:09 '11 pada 4:09 2011-12-05 04:09
 <tr id="tablerow"></tr> $('#tablerow').append('<tr>...</tr><tr>...</tr>'); 
7
21 дек. Jawabannya diberikan Vivek S 21 Desember. 2013-12-21 14:54 '13 pada 14:54 2013-12-21 14:54

Saya pikir saya lakukan dalam proyek saya, ini dia:

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 янв. jawabannya diberikan SNEH PANDYA 31 Januari. 2014-01-31 09:13 '14 pada 9:13 2014-01-31 09:13

Ini adalah kode peretasan untuk peretasan. Saya ingin menyimpan templat string di halaman HTML . Baris-baris tabel 0 ... n ditampilkan pada saat permintaan, dan contoh ini memiliki satu string pengkodean keras dan string pola yang disederhanakan. Tabel template disembunyikan, dan tag string harus dalam tabel yang valid, atau browser dapat menghapusnya dari pohon DOM . Menambahkan string menggunakan penghitung pengidentifikasi + 1, dan nilai saat ini disimpan dalam atribut data. Ini memastikan bahwa setiap baris menerima parameter URL unik.

Saya menjalankan tes di Internet Explorer 8, Internet 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (dengan Symbian 3), Android share dan Firefox versi beta.

 <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: Saya memberikan semua kredit kepada tim jQuery; mereka layak mendapatkan segalanya. Pemrograman JavaScript tanpa jQuery - Saya bahkan tidak ingin memikirkan mimpi buruk ini.

7
29 марта '13 в 0:51 2013-03-29 00:51 jawabannya diberikan oleh Siapa 29 Maret, '13 pada 0:51 2013-03-29 00:51
 <table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> <tr>...</tr> </table> 

Menulis dengan fungsi javascript

 document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>'; 
7
19 янв. Balas diberikan oleh Jakir Hossain pada 19 Januari 2016-01-19 23:09 '16 pada 11:09 PM 2016-01-19 23:09

Karena saya juga punya cara untuk menambahkan string pada akhirnya atau ke beberapa tempat tertentu, jadi saya pikir saya juga harus membagikan ini:

Pertama, temukan panjang atau garis:

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

dan kemudian gunakan kode di bawah ini untuk menambahkan baris:

 $("#table_id").eq(r-1).after(row_html); 
6
20 мая '13 в 12:14 2013-05-20 12:14 jawabannya diberikan oleh Jaid07 20 Mei '13 pada 12:14 2013-05-20 12:14

Untuk menambahkan contoh yang baik untuk topik ini, inilah solusi yang berfungsi jika Anda perlu menambahkan garis ke posisi tertentu.

Baris tambahan ditambahkan setelah baris ke-5 atau di akhir tabel jika jumlah baris kurang dari 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); } 

Saya menaruh isinya di wadah yang sudah jadi (tersembunyi) di bawah meja. Jadi, jika Anda (atau perancang) perlu berubah, Anda tidak perlu mengedit JS.

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

jika Anda memiliki variabel lain yang dapat Anda akses di <td> , coba ini.

Jadi, saya harap itu akan membantu

 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 окт. Jawabannya diberikan MEAbid 14 Oktober. 2016-10-14 08:18 '16 pada 8:18 pagi 2016-10-14 08:18
 <table id=myTable> <tr><td></td></tr> <style="height=0px;" tfoot></tfoot> </table> 

Anda bisa men-cache variabel footer dan mengurangi akses ke DOM (Catatan: mungkin lebih baik menggunakan baris palsu daripada footer).

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

Ini keputusan saya

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

Secara sederhana:

 $('#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 jawabannya diberikan oleh vipul sorathiya 16 Juni '15 pukul 15:11 2015-06-16 15:11

Jika Anda menggunakan plugin Datatable JQuery, Anda dapat mencoba.

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

Lihat Datatables fnAddData Datatables API

5
02 окт. Jawabannya diberikan Praveena M 02 Oktober. 2013-10-02 08:06 '13 pada 8:06 2013-10-02 08:06
 $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 

akan menambahkan baris baru ke tabel TFOOT pertama , terlepas dari keberadaan THEAD atau TFOOT . (Saya tidak menemukan informasi dari versi jQuery .append() perilaku ini ada.)

Anda dapat mencoba ini dalam contoh berikut:

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

Dalam contoh apa, string ab dimasukkan setelah 1 2 , dan bukan setelah 3 4 pada contoh kedua. Jika tabel itu kosong, jQuery membuat TBODY untuk baris baru.

5
19 апр. Balas diberikan oleh Alexey Pavlov pada 19 April 2012-04-19 13:53 '12 pada pukul 13:53 2012-04-19 13:53

Jika Anda ingin menambahkan row sebelum elemen anak pertama <tr> .

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

Jika Anda ingin menambahkan row setelah <tr> anak terakhir.

 $("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>"); 
4
16 марта '17 в 12:07 2017-03-16 12:07 jawabannya diberikan oleh Sumon Sarker 16 Maret 17 di 12:07 2017-03-03-16 12:07
  • 1
  • 2

Pertanyaan lain tentang label atau Ajukan Pertanyaan