Дадаць радок табліцы ў 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

Падыход, які вы прапануеце, ня гарантавана дасць вам вынік, які вы шукаеце - што, калі ў вас быў tbody , напрыклад:

 <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, уключаючы некалькі радкоў у адпаведнасці з прыведзеных вышэй прыкладам.

Абнаўленне:. Паспрабуйце гэты адказ пасля нядаўняй працы з гэтым пытаннем. безадказнасць заўважае, што ў DOM заўсёды будзе tbody ; гэта дакладна, але толькі калі ёсць хоць бы адзін радок. Калі ў вас няма радкоў, не будзе tbody , калі вы самі не паказалі.

DaRKoN_ прапануе дадаць да tbody замест дадання кантэнту пасля апошняга tr . Гэта закранае праблему адсутнасці радкоў, але ўсё ж не з'яўляецца куленепрабівальным, паколькі тэарэтычна вы можаце мець некалькі элементаў tbody , і радок будзе дададзеная да кожнага з іх.

Ўзважыў, я не ўпэўнены, што ёсць адно однострочный рашэнне, якое ўлічвае кожны магчымы сцэнар. Вам трэба будзе пераканацца, што код jQuery адпавядае вашай разметцы.

Я думаю, што самым бяспечным рашэннем, верагодна, з'яўляецца забеспячэнне таго, каб ваш table заўсёды уключаў па меншай меры адзін tbody ў вашай разметцы, нават калі ён не мае радкоў. Зыходзячы з гэтага, вы можаце выкарыстоўваць наступнае, якое будзе працаваць, нягледзячы на тое, што ў вас ёсць некалькі радкоў (а таксама ўлік некалькіх элементаў tbody ):

 $('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>'); 
1961
05 окт. адказ дадзены Luke Bennett 05 каст. 2008-10-05 00:49 '08 у 0:49 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>') у jQuery - гэта аб'ект тэга, які можа мець некалькі атрыбутаў attr , якія можна ўсталяваць і атрымаць, а таксама text , які ўяўляе тэкст паміж тэгам тут: <tag>text</tag> .

Гэта даволі дзіўны водступ, але вам лягчэй ўбачыць, што адбываецца ў гэтым прыкладзе.

723
14 авг. адказ дадзены Neil 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 адказ дадзены Salman Abbas 05 чэрвеня '12 у 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 , а не .after .

 $("#myTable > tbody").append("<tr><td>row content</td></tr>"); 
157
22 янв. адказ дадзены ChadT 22 студз. 2009-01-22 09:47 '09 у 09: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 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>'); 

тут ёсць дэманстрацыя Fiddle

Таксама я магу парэкамендаваць невялікую функцыю, каб зрабіць больш змяненняў 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' })); 

Вось дэманстрацыя Fiddle

30
30 июня '14 в 15:40 2014-06-30 15:40 адказ дадзены sulest 30 чэрвеня '14 у 15:40 2014/06/30 15:40

Гэта можна зрабіць лёгка, выкарыстоўваючы функцыю "last ()" jQuery.

 $("#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 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 янв. адказ дадзены Oshua 22 студз. 2011-01-22 01:21 '11 у 01: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 а 22: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 add table row . Ён выдатна працуе з табліцамі з <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 сакавіка '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 дек. адказ дадзены 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 plugin вельмі карысным для кіравання радкамі табліцы. Хоць рашэнне Luke было б лепш за ўсё падыходзіць, калі вам проста трэба дадаць новы радок.

8
05 дек. адказ дадзены Vitalii Fedorenko 05 снеж. 2011-12-05 04:09 '11 у 04:09 2011-12-05 04:09
 <tr id="tablerow"></tr> $('#tablerow').append('<tr>...</tr><tr>...</tr>'); 
7
21 дек. адказ дадзены Vivek S 21 снеж. 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 . Даданне радка выкарыстоўвае ідэнтыфікатар counter + 1, а бягучае значэнне захоўваецца ў атрыбуце дадзеных. Ён гарантуе, што кожны радок атрымлівае унікальныя параметры 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(); } </a> <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(); } </a> <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(); } row"> Add row </a> <br/> <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(); } names <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 адказ дадзены Whome 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 янв. адказ дадзены Jakir Hossain 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 00: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 авг. адказ дадзены d.raev 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 у 08: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 крас. 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 адказ дадзены Daniel Ortegón 20 ліпеня '17 ў 05: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

Калі вы выкарыстоўваеце плягін Datatable 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); 

См. FnAddData Datatables Datatables API

5
02 окт. адказ дадзены Praveena M 02 каст. 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>'); 

дадасць новую радок у FIRST 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 апр. адказ дадзены Alexey Pavlov 19 крас. 2012-04-19 13:53 '12 у 13:53 2012-04-19 13:53

Калі вы хочаце дадаць row перад першым даччыным элементам <tr> .

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

Калі вы хочаце дадаць row пасля <tr> апошняга дзіцяці.

 $("#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 сакавіка '17 у 12:07 2017/03/16 00:07
  • 1
  • 2

Іншыя пытанні па пазнаках або Задайце пытанне