Добавете ред на таблицата към jQuery

Какъв е най-добрият метод в jQuery да добавите допълнителен ред към таблицата като последен ред?

Това приемливо ли е?

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

Има ли някакви ограничения за това, което можете да добавите към такава таблица (например, входове, селекции, брой редове)?

2182
05 окт. Darryl Hein на 05 октомври 2008-10-05 00:33 '08 в 0:33 2008-10-05 00:33
@ 33 отговора
  • 1
  • 2

Подходът, който предлагате, не е гарантиран, за да ви даде резултата, който търсите - какво да направите, ако имате такъв, например:

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

Ще получите следното:

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

Ето защо бих препоръчал този подход:

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

Можете да включите нещо в метода after() , стига да е валидно за HTML, включително няколко реда според горния пример.

Актуализиране :. Повторете този отговор след последната работа с този въпрос. безотговорност отбелязва, че винаги ще има хора в ДОМ; това е вярно, но само ако има поне един ред. Ако нямате низове, няма да има нищо, освен ако сами не сте посочили.

DaRKoN_ предлага добавяне към tbody вместо добавяне на съдържание след последното tr . Това повдига проблема с липсващите линии, но все още не е защитен от куршуми, тъй като теоретично можете да имате няколко елемента tbody и ще бъде добавен ред към всеки от тях.

След като претегли всичко, не съм сигурен, че има едно единствено решение, което да отчита всеки възможен сценарий. Трябва да се уверите, че кодът jQuery съвпада с маркирането.

Мисля, че най-безопасното решение е да се гарантира, че вашата table винаги включва поне един tbody в маркирането, дори ако няма редове. Въз основа на това можете да използвате следното, което ще работи, въпреки факта, че имате няколко реда (както и като вземете под внимание няколко елемента tbody ):

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

jQuery има вграден инструмент за управление на DOM елементи в движение.

Можете да добавите нещо към таблицата си по следния начин:

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

$('<some-tag>') Object $('<some-tag>') в jQuery е обект на тагове, който може да има няколко атрибута attr , които могат да бъдат зададени и извлечени, както и text , който представя текста между маркера тук: ,

Това е доста странно тире, но за вас е по-лесно да видите какво се случва в този пример.

723
14 авг. отговорът е даден от Нийл 14 август. 2009-08-14 18:30 '09 в 18:30 часа 2009-08-14 18:30

Така че всичко се промени, тъй като @ Luke Bennett отговори на този въпрос. Ето актуализацията.

jQuery, тъй като версия 1.4 (?) автоматично определя дали елементът, който се опитвате да вмъкнете (използвайки някой от append() , prepend() , before() или after() ) е <tr> и го вмъква в първия <tbody> във вашата таблица или го прехвърля в нов <tbody> , ако не съществува.

Така че, вашият примерен код е приемлив и ще работи добре с 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 отговорът е даден от Салман Абас на 05 юни 2008 г. в 23:12 ч. 2012-06-05 23:12

Какво ще стане, ако имате <tbody> и <tfoot> ?

Например:

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

След това вкарва нов ред в долния, а не в тялото.

Затова най-доброто решение е да включите <tbody> и да използвате .append , а не.

 $("#myTable > tbody").append("<tr><td>row content</td></tr>"); 
157
22 янв. отговорът е даден ChadT 22 януари 2009-01-22 09:47 '09 в 9:47 2009-01-22 09:47

Знам, че сте поискали метода jQuery. Гледах много и открих, че можем да го направим по-добре от директното използване на JavaScript със следната функция.

 tableObject.insertRow(index) 

index е цяло число, което показва позицията на линията за вмъкване (започва с 0). Можете също да използвате стойността -1; в резултат на това новата линия ще бъде поставена в последната позиция.

Тази опция се изисква във Firefox и Opera , но не се изисква в Internet Explorer, Chrome и Safari .

Ако този параметър не е insertRow() , insertRow() вмъква нов ред в последната позиция в Internet Explorer и на първа позиция в Chrome и Safari.

Това ще работи за всяка приемлива структура на HTML таблицата.

Следният пример поставя низ в последния (-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> 

Надявам се това да помогне.

55
20 апр. отговорът е даден от shashwat 20 април 2012-04-20 20:38 '12 в 20:38 ч. 2012-04-20 20:38

Препоръчвам ви

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

за разлика от

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

Ключовите думи first и last работят върху първия или последния маркер, който трябва да се изпълни, а не в затворен. По този начин тя изглежда по-добре с вложени таблици, ако не искате вложената таблица да бъде модифицирана и вместо това да се добави към общата таблица. Поне това открих.

 <table id=myTable> <tbody id=first> <tr><td> <table id=myNestedTable> <tbody id=last> </tbody> </table> </td></tr> </tbody> </table> 
33
23 окт. отговор, даден от Curtor Oct 23 2010-10-23 00:34 '10 в 0:34 2010-10-23 00:34

По мое мнение най-бързият и най-интуитивен начин -

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

тук има демонстрация на цигулка

Мога също да препоръчам малка функция, за да направят повече промени в 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] : ''; }); } }()); 

Ако използвате композитора на низ, можете да го направите

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

Ето демонстрация на цигулка

30
30 июня '14 в 15:40 2014-06-30 15:40 отговор даден sulest 30 юни '14 в 15:40 2014-06-30 15:40

Това може да се направи лесно, като се използва функцията jQuery "last ()".

 $("#tableId").last().append("<tr><td>New row</td></tr>"); 
23
26 янв. Отговорът е даден Nischal 26 Ян. 2010-01-26 16:34 '10 в 16:34 2010-01-26 16:34

Използвам този метод, когато няма ред в таблицата и всеки ред е доста сложен.

style.css:

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

xxx.html

 ... <tr id="templateRow"> ... </tr> ... $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() ); ... 
17
16 дек. Отговор от Dominic Dec 16 2010-12-16 08:30 '10 в 8:30 ч. 2010-12-16 08:30

За по-добро решение, поставено тук, ако в последния ред има вложена таблица, новият ред ще бъде добавен към вложената таблица вместо в главната таблица. Бързо поправяне (включително таблици с / без tbody и таблици с вложени таблици):

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

Пример за използване:

 add_new_row('#myTable','<tr><td>my new row</td></tr>'); 
14
22 янв. Отговорът е даден на Ошуа 22 януари 2011-01-22 01:21 '11 в 1:21 2011-01-22 01:21

Имах някои свързани проблеми, когато се опитвах да вмъкна ред в таблицата след кликване върху ред. Всичко е наред, с изключение на това, че повикването .after () не работи за последния ред.

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

Пристигнах с много разхвърляно решение:

Създайте таблица, както следва (id за всеки ред):

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

и така нататък

и след това:

 $('#traffic tbody').find('tr.trafficBody' + idx).after(html); 
13
05 окт. Avron Olshewsky отговори на 05 октомври 2009-10-05 22:17 '09 в 10:17 ч. 2009-10-05 22:17

Реших така.

Използване на jquery

 $('#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> 
11
12 окт. Отговор Anton vBR 12 окт. 2017-10-12 20:54 '17 в 20:54 часа 2017-10-12 20:54

Моето решение:

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

използвате:

 $('#Table').addNewRow(id1); 
10
09 марта '12 в 3:48 2012-03-09 03:48 отговорът е даден от Ricky G март 09 '12 в 3:48 2012-03-09 03:48

Можете да използвате този голям jQuery добавите функция за ред на таблицата . Работи добре с таблици с <tbody> , но това не е така. Той също така взема предвид броя на последните редове на таблицата.

Ето пример за използване:

 // One table addTableRow($('#myTable')); // add table row to number of tables addTableRow($('.myTables')); 
10
02 марта '09 в 16:21 2009-03-02 16:21 отговорът е даден Uzbekjon 02 март 2009 г. в 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 дек. Отговорът е даден от Pankaj Garg 06 декември. 2015-12-06 07:13 '15 в 7:13 2015-12-06 07:13

Отговорът на Нийл определено е най-добрият. Но нещата стават много разхвърляни. Моето предложение беше да използвам променливи за съхраняване на елементи и да ги добавяме към йерархията на 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 отговорът е даден от GabrielOshiro 11 май '14 в 15:04 2014-05-11 15:04

Намерих тази добавка за AddRow доста полезна за управление на редове в таблиците. Въпреки че решението на Люк би било най-подходящо, ако просто трябва да добавите нов ред.

8
05 дек. отговорът е даден от Виталий Федоренко 05 декември. 2011-12-05 04:09 '11 в 4:09 2011-12-05 04:09
 <tr id="tablerow"></tr> $('#tablerow').append('<tr>...</tr><tr>...</tr>'); 
7
21 дек. Отговорът е даден Vivek S 21 dec. 2013-12-21 14:54 '13 в 14:54 2013-12-21 14:54

Мисля, че направих в моя проект, тук е:

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 янв. отговорът е даден SNEH PANDYA 31 Ян. 2014-01-31 09:13 '14 в 9:13 2014-01-31 09:13

Това е хакерският код за хакване. Исках да запазя шаблона с низове на HTML страницата. Редовете на таблицата 0 ... n се показват по време на заявката и този пример има един твърд кодиращ низ и опростен низ на шаблон. Шаблонната таблица е скрита и маркерът с низове трябва да е във валидна таблица или браузърите могат да го премахнат от дървото DOM . Добавянето на низ използва брояча на идентификатор + 1 и текущата стойност се съхранява в атрибута data. Той гарантира, че всеки ред получава уникални параметри на URL адреса .

Проведох тестове на Internet Explorer 8, Internet 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7Symbian 3), акции на Android и бета версии на Firefox.

 <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: Давам всички кредити на екипа на jQuery; те заслужават всичко. Програмиране на JavaScript без jQuery - Аз дори не искам да мисля за този кошмар.

7
29 марта '13 в 0:51 2013-03-29 00:51 Отговорът е даден от когото 29 март '13 в 0:51 2013-03-29 00:51
 <table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> <tr>...</tr> </table> 

Писане с функцията javascript

 document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>'; 
7
19 янв. Отговор, даден от Якир Хосейн на 19 януари 2016-01-19 23:09 '16 в 23:09 2016-01-19 23:09

Тъй като имам начин да добавя най-накрая низ или на някакво определено място, мисля, че трябва да споделя и това:

Първо намерете дължината или линиите:

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

и след това използвайте кода по-долу, за да добавите ред:

 $("#table_id").eq(r-1).after(row_html); 
6
20 мая '13 в 12:14 2013-05-20 12:14 отговорът е даден от Jaid07 20 май '13 в 12:14 2013-05-20 12:14

За да добавите добър пример към тази тема, ето работно решение, ако трябва да добавите ред към определена позиция.

Допълнителен ред се добавя след 5-ти ред или в края на таблицата, ако броят на редовете е по-малък от 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); } 

Поставям съдържанието в готовия (скрит) контейнер под масата. Така че, ако вие (или дизайнерът) трябва да промените, не е необходимо да редактирате JS.

 <table id="banner_holder" style="display:none;"> <tr> <td colspan="3"> <div class="wide-banner"></div> </td> </tr> </table> 
6
29 авг. отговорът е даден д.раев 29 август. 2013-08-29 14:35 '13 в 14:35 2013-08-29 14:35

ако имате друга променлива, която можете да отворите в <td> , опитайте това.

Така че се надявам, че ще е полезно

 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 окт. Отговорът е даден MEAbid 14 окт. 2016-10-14 08:18 '16 в 8:18 ч. 2016-10-14 08:18
 <table id=myTable> <tr><td></td></tr> <style="height=0px;" tfoot></tfoot> </table> 

Можете да кеширате променливата за долния колонтитул и да намалите достъпа до DOM (Забележка: може да е по-добре да използвате фалшива линия, вместо долния).

 var footer = $("#mytable tfoot") footer.before("<tr><td></td></tr>") 
6
13 апр. Отговор Pavel Shkleinik 13.04 2012-04-13 13:47 '12 в 13:47 2012-04-13 13:47

Това е моето решение

 $('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>'); 
5
20 июля '17 в 5:34 2017-07-20 05:34 отговорът е даден на Даниел Ортегон на 20 юли 17 в 5:34 2017-07-20 05:34

По прост начин:

 $('#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 отговорът е даден от vipul sorathiya 16 юни '15 в 15:11 2015-06-16 15:11

Ако използвате приставката за данни на JQuery, можете да опитате.

 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

5
02 окт. Отговорът е даден Praveena M 02 oct. 2013-10-02 08:06 '13 в 8:06 2013-10-02 08:06
 $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 

ще добави нов ред към първата таблица TBODY , независимо от присъствието на THEAD или TFOOT . (Не намерих информацията от коя версия на jQuery .append() такова поведение.)

Можете да опитате това в следните примери:

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

В кой пример низът ab вмъква след 1 2 , а не след 3 4 във втория пример. Ако таблицата е празна, jQuery създава TBODY за новия ред.

5
19 апр. Отговор, даден от Алексей Павлов на 19 април 2012-04-19 13:53 '12 в 1:53 pm 2012-04-19 13:53

Ако искате да добавите row пред първия дъщерен елемент <tr> .

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

Ако искате да добавите row след последното дете.

 $("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>"); 
4
16 марта '17 в 12:07 2017-03-16 12:07 отговорът е даден от Sumon Sarker 16 март 2006 г. в 12:07 2017-03-03-16 12:07
  • 1
  • 2

Други въпроси относно етикетите или Ask a Question