Aggiungi la riga della tabella in jQuery

Qual è il metodo migliore in jQuery per aggiungere una riga aggiuntiva a un tavolo come ultima riga?

È accettabile?

$('#myTable').append('my datamore data'); 

Esistono limitazioni a ciò che è ansible aggiungere a una tabella come questa (come input, select, numero di righe)?

L’approccio che suggerisci non è garantito per darti il ​​risultato che stai cercando – e se tu avessi un tbody per esempio:

 ......

Si finirebbe con il seguente:

 .........

Pertanto raccomanderei questo approccio:

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

Puoi includere qualsiasi cosa nel metodo after() a condizione che sia HTML valido, incluse più righe come nell’esempio sopra.

Aggiornamento: rivisitazione di questa risposta dopo l’attività recente con questa domanda. l’assenza di palpebre fa un buon commento sul fatto che ci sarà sempre un tbody nel DOM; questo è vero, ma solo se c’è almeno una riga. Se non hai file, non ci saranno persone se non ne hai specificato uno tu.

DaRKoN_ suggerisce di accodarsi al corpo piuttosto che aggiungere contenuto dopo l’ultima tr . Questo aggira il problema di non avere righe, ma non è ancora a prova di proiettile perché teoricamente potrebbero avere più elementi tbody e la riga verrebbe aggiunta a ciascuno di essi.

Considerando tutto sumto, non sono sicuro che esista un’unica soluzione a una linea che conti per ogni singolo scenario ansible. Dovrai assicurarti che il codice jQuery corrisponda al tuo markup.

Penso che la soluzione più sicura sia probabilmente quella di garantire che la tua table includa sempre almeno una tbody nel tuo markup, anche se non ha righe. Su questa base, puoi usare quanto segue che funzionerà su molte righe che hai (e anche per tenere conto di più elementi tbody ):

 $('#myTable > tbody:last-child').append('......'); 

jQuery ha una funzione integrata per manipolare gli elementi DOM al volo.

Puoi aggiungere qualsiasi cosa alla tua tabella in questo modo:

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

La cosa $('') in jQuery è un object tag che può avere diversi attributi attr che possono essere impostati e ottenere, così come il text , che rappresenta il testo tra il tag qui: text .

Questo è un rientro piuttosto strano, ma è più facile per te vedere cosa sta succedendo in questo esempio.

Quindi le cose sono cambiate da quando @ Luca Bennett ha risposto a questa domanda. Ecco un aggiornamento.

jQuery dalla versione 1.4 (?) rileva automaticamente se l’elemento che si sta tentando di inserire (utilizzando uno qualsiasi dei metodi append() , prepend() , before() o after() ) è un

e lo inserisce nel prima

nel tuo tavolo o lo avvolge in un nuovo

se uno non esiste.

Quindi sì, il tuo codice di esempio è accettabile e funzionerà bene con jQuery 1.4+. 😉

 $('#myTable').append('my datamore data'); 

E se tu avessi un

e un

?

Ad esempio:

 
Foo
footer information

Quindi inserirà la nuova riga nel piè di pagina, non nel corpo.

Quindi la soluzione migliore è includere un tag

e usare .append , piuttosto che .after .

 $("#myTable > tbody").append("row content"); 

So che hai chiesto un metodo jQuery. Ho guardato molto e ho trovato che possiamo farlo in un modo migliore rispetto all’utilizzo di JavaScript direttamente dalla seguente funzione.

 tableObject.insertRow(index) 

index è un numero intero che specifica la posizione della riga da inserire (inizia da 0). Il valore di -1 può anche essere utilizzato; il risultato è che la nuova riga verrà inserita nell’ultima posizione.

Questo parametro è richiesto in Firefox e Opera , ma è facoltativo in Internet Explorer, Chrome e Safari .

Se questo parametro viene omesso, insertRow() inserisce una nuova riga nell’ultima posizione in Internet Explorer e nella prima posizione in Chrome e Safari.

Funzionerà per ogni struttura accettabile della tabella HTML.

L’esempio seguente inserirà una riga nell’ultimo (-1 è usato come indice):

      
cell 1 cell 2
cell 3 cell 4

Spero possa essere d’aiuto.

io raccomando

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

al contrario di

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

La first e l’ last parola chiave funzionano sul primo o sull’ultimo tag da avviare, non chiusi. Pertanto, questo funziona meglio con le tabelle nidificate, se non si desidera modificare la tabella nidificata, ma aggiungerla alla tabella generale. Almeno, questo è quello che ho trovato.

 

Secondo me il modo più veloce e chiaro è

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

ecco la demo Fiddle

Inoltre posso consigliare una piccola funzione per apportare più modifiche 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] : ''; }); } }()); 

Se usi il mio compositore d’archi puoi farlo

 var tbody = $('#myTable').children('tbody'); var table = tbody.length ? tbody : $('#myTable'); var row = ''+ '{{id}}'+ '{{name}}'+ '{{phone}}'+ ''; //Add row table.append(row.compose({ 'id': 3, 'name': 'Lee', 'phone': '123 456 789' })); 

Ecco la demo Fiddle

Questo può essere fatto facilmente usando la funzione “last ()” di jQuery.

 $("#tableId").last().append("New row"); 

Sto usando in questo modo quando non ci sono righe nella tabella, e ogni riga è piuttosto complicata.

style.css:

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

xxx.html

 ...  ...  ... $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() ); ... 

Stavo avendo alcuni problemi correlati, cercando di inserire una riga della tabella dopo la riga cliccata. Tutto va bene, tranne che la chiamata .after () non funziona per l’ultima riga.

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

Sono atterrato con una soluzione molto disordinata:

crea la tabella come segue (id per ogni riga):

  ...   ...   ...  

eccetera …

e poi :

 $('#traffic tbody').find('tr.trafficBody' + idx).after(html); 

Per la migliore soluzione pubblicata qui, se c’è una tabella annidata nell’ultima riga, la nuova riga verrà aggiunta alla tabella nidificata invece della tabella principale. Una soluzione rapida (considerando tabelle con / senza tbody e tabelle con tabelle nidificate):

 function add_new_row(table, rowcontent) { if ($(table).length > 0) { if ($(table + ' > tbody').length == 0) $(table).append(''); ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent); } } 

Esempio di utilizzo:

 add_new_row('#myTable','my new row'); 

Puoi usare questa grande funzione jQuery add table table . Funziona alla grande con i tavoli che hanno

e quelli no. Inoltre prende in considerazione il colspan dell’ultima riga della tabella.

Ecco un esempio di utilizzo:

 // One table addTableRow($('#myTable')); // add table row to number of tables addTableRow($('.myTables')); 
  // Create a row and append to table var row = $('', {}) .appendTo("#table_id"); // Add columns to the row.  properties can be given in the JSON $('', { 'text': 'column1' }).appendTo(row); $('', { 'text': 'column2', 'style': 'min-width:100px;' }).appendTo(row); 

La mia soluzione:

 //Adds a new table row $.fn.addNewRow = function (rowId) { $(this).find('tbody').append(' '); }; 

utilizzo:

 $('#Table').addNewRow(id1); 

La risposta di Neil è di gran lunga la migliore. Comunque le cose si complicano molto velocemente. Il mio suggerimento sarebbe di usare le variabili per memorizzare gli elementi e aggiungerli alla gerarchia DOM.

HTML

 

JAVASCRIPT

 // Reference to the table body var body = $("#tableID").find('tbody'); // Create a new row element var row = $(''); // Create a new column element var column = $(''); // Create a new image element var image = $(''); 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); 

Ho trovato questo plugin AddRow abbastanza utile per la gestione delle righe della tabella. Tuttavia, la soluzione di Luke sarebbe la soluzione migliore se hai solo bisogno di aggiungere una nuova riga.

Ecco un codice di hackingi hack. Volevo mantenere un modello di riga in una pagina HTML . Le righe della tabella 0 … n vengono visualizzate al momento della richiesta e questo esempio ha una riga codificata in codice e una riga del modello semplificata. La tabella modello è nascosta e il tag riga deve essere all’interno di una tabella valida oppure i browser possono rilasciarlo dalla struttura DOM . L’aggiunta di una riga utilizza l’identificatore contatore + 1 e il valore corrente viene mantenuto nell’attributo dati. Garantisce che ogni riga abbia parametri URL unici.

Ho eseguito test su Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (con Symbian 3), Android Android e Firefox beta browser.

 
Name Value  
key1
Add row

- - - - // add row to html table, read html from row template function addRow(sTableId) { // find destination and template tables, find first // in template. Wrap inner html around tags. // Keep track of counter to give unique field names. var table = $("#"+sTableId); var template = $("#"+sTableId+"_rowtemplate"); var htmlCode = ""+template.find("tr:first").html()+""; 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 row, childElem is any element inside row function deleteRow(childElem) { var row = $(childElem).closest("tr"); // find parent row.remove(); }

PS: Do tutti i crediti al team jQuery; meritano tutto. Programmazione JavaScript senza jQuery – Non voglio nemmeno pensare a quell’incubo.

  $('#tablerow').append('......'); 

I Indovina che ho fatto nel mio progetto, eccolo qui:

html

 
< %= form_for (@replication) do |f| %>
< %= f.label :SR_NO %> < %= f.text_field :sr_no , :id => "txt_RegionName" %>
< %= f.label :Particular %> < %= f.text_area :particular , :id => "txt_Region" %>
< %= f.label :Unit %> < %= f.text_field :unit ,:id => "txt_Regio" %>
< %= f.label :Required_Quantity %> < %= f.text_field :quantity ,:id => "txt_Regi" %>
< % end %>
SR_NO Item Name Particular Cost

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('' + val + '' + '' + val2 + '' + '' + val3 + '' + '' + val4 + ''); $('#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'); }); }); }); 
 .........

Scrivi con una funzione javascript

 document.getElementById("myTable").insertRow(-1).innerHTML = '......'; 

Come ho anche avuto modo di aggiungere una riga alla fine o un posto specifico, quindi penso che dovrei anche condividere questo:

Prima trova la lunghezza o le righe:

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

e quindi utilizzare sotto il codice per aggiungere la riga:

 $("#table_id").eq(r-1).after(row_html); 

Per aggiungere un buon esempio sull’argomento, ecco una soluzione funzionante se è necessario aggiungere una riga in una posizione specifica.

La riga aggiuntiva viene aggiunta dopo la quinta riga o alla fine della tabella se ci sono meno di 5 righe.

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

Metto il contenuto su un contenitore (nascosto) pronto sotto la tabella .. quindi se tu (o il designer) devi cambiarlo non è necessario modificare il JS.

  
 

È ansible memorizzare nella cache la variabile footer e ridurre l’accesso al DOM (Nota: potrebbe essere preferibile utilizzare una riga falsa invece del piè di pagina).

 var footer = $("#mytable tfoot") footer.before("") 

se hai un’altra variabile puoi accedere in

tag come quella prova.

In questo modo spero che sarebbe utile

 var table = $('#yourTableId'); var text = 'My Data in td'; var image = 'your/image.jpg'; var tr = ( '' + ''+ text +''+ ''+ text +''+ ''+ 'yourImage'+ ''+ '' ); $('#yourTableId').append(tr); 
 $('#myTable').append('my datamore data'); 

aggiungerà una nuova riga al primo TBODY della tabella, senza dipendere da alcun THEAD o TFOOT presente. (Non ho trovato informazioni da quale versione di jQuery .append() questo comportamento è presente.)

Puoi provarlo in questi esempi:

 
h1h2
12
f1f2

h1h2
12
34
f1f2

h1h2

12

In quale esempio viene inserita una riga ab dopo 1 2 , non dopo 3 4 nel secondo esempio. Se la tabella era vuota, jQuery crea TBODY per una nuova riga.

Se stai usando il plugin Datatable JQuery puoi provare.

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

Fare riferimento a Datatables fnAddData Datatables API

In un modo semplice:

 $('#yourTableId').append('your data1your data2your data3'); 

L’ho risolto in questo modo che penso sia il più leggibile 🙂

 $('#tab').append($('') .append($('').append("text")) .append($('').append("text")) .append($('').append("text")) .append($('').append("text")) ) 

Se si desidera aggiungere una row prima del

primo figlio.

 $("#myTable > tbody").prepend("my datamore data"); 

Se si desidera aggiungere una row dopo l’ultimo figlio

.

 $("#myTable > tbody").append("my datamore data"); 

Questa è la mia soluzione

 $('#myTable').append(''+data+''+other data+'...');