Aggiungi la riga della tabella in jQuery
https://stackoverflow.com/questions/171027
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Qual è il metodo migliore in jQuery per aggiungere una riga aggiuntiva a una tabella come ultima riga?
È accettabile?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Ci sono limitazioni a ciò che puoi aggiungere a una tabella come questa (come input, selezioni, numero di righe)?
Soluzione
Non è garantito che l'approccio che suggerisci ti dia il risultato che stai cercando: cosa succederebbe se ne avessi uno tbody Per esempio:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Ti ritroveresti con quanto segue:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Consiglierei quindi questo approccio:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Puoi includere qualsiasi cosa all'interno del file after() purché sia un codice HTML valido, incluse più righe come nell'esempio sopra.
Aggiornamento: Rivisitando questa risposta in seguito alla recente attività con questa domanda.la mancanza di palpebre fa un buon commento sul fatto che ci sarà sempre a tbody nel DOM;questo è vero, ma solo se c'è almeno una riga.Se non hai righe, non ci sarà tbody a meno che tu non ne abbia specificato uno tu stesso.
DarkoN_ suggerisce aggiungendo al tbody piuttosto che aggiungere contenuti dopo l'ultimo tr.Questo risolve il problema di non avere righe, ma non è ancora a prova di proiettile poiché teoricamente potresti averne più tbody elementi e la riga verrebbe aggiunta a ciascuno di essi.
Soppesando tutto, non sono sicuro che esista un'unica soluzione unifilare che tenga conto di ogni singolo scenario possibile.Dovrai assicurarti che il codice jQuery corrisponda al tuo markup.
Penso che la soluzione più sicura sia probabilmente quella di garantire il tuo table ne include sempre almeno uno tbody nel markup, anche se non ha righe.Su questa base, puoi utilizzare quanto segue che funzionerà qualunque sia il numero di righe che hai (e terrà conto anche di più tbody elementi):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Altri suggerimenti
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($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
La cosa $('<some-tag>') in jQuery è un oggetto tag che può avere diversi attr attributi che possono essere impostati e ottenuti, nonché text, che rappresenta il testo tra i tag qui: <tag>text</tag>.
Questo è un rientro piuttosto strano, ma è più facile per te vedere cosa sta succedendo in questo esempio.
Quindi le cose sono cambiate da quando @Luke 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 dei < => , append() , prepend() o before() metodi) è un after() e lo inserisce nel primo <tr> nella tabella o lo avvolge in un nuovo <tbody> se non esiste.
Quindi sì, il tuo codice di esempio è accettabile e funzionerà bene con jQuery 1.4+. ;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
E se avessi un <tbody> e un <tfoot>?
Ad esempio:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Quindi inserirà la nuova riga nel piè di pagina, non nel corpo.
Quindi la soluzione migliore è includere un .append tag e usare .after, piuttosto che <=>.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
So che hai chiesto un metodo jQuery. Ho guardato molto e ho scoperto che possiamo farlo in un modo migliore rispetto all'uso 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 usato; il che comporta 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 & nbsp; 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 viene utilizzato come indice):
<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>
Spero che sia d'aiuto.
Raccomando
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
al contrario di
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
Le parole chiave first e last funzionano sul primo o sull'ultimo tag da avviare, non chiuso. Pertanto, questo funziona meglio con le tabelle nidificate, se non si desidera modificare la tabella nidificata, ma invece si aggiunge alla tabella generale. Almeno, questo è quello che ho trovato.
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>
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('<tr><td>hello></td></tr>');
ecco la dimostrazione Violino
Inoltre posso consigliare una piccola funzione per apportare ulteriori 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 in questo modo
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'
}));
Ecco la dimostrazioneViolino
Questo può essere fatto facilmente usando " last () " funzione di jQuery.
$("#tableId").last().append("<tr><td>New row</td></tr>");
Sto usando questo modo quando non ci sono righe nella tabella, così come ogni riga è piuttosto complicata.
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
Per la migliore soluzione pubblicata qui, se nell'ultima riga è presente una tabella nidificata, la nuova riga verrà aggiunta alla tabella nidificata anziché alla 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('<tbody />');
($(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','<tr><td>my new row</td></tr>');
Stavo riscontrando alcuni problemi correlati, cercando di inserire una riga della tabella dopo la riga selezionata. Va tutto bene tranne la chiamata .after () non funziona per l'ultima riga.
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
Sono arrivato con una soluzione molto disordinata:
crea la tabella come segue (id per ogni riga):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
ecc ...
e quindi:
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
L'ho risolto in questo modo.
Uso di jquery
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)
Snippet
$('#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>
Puoi usare questo fantastico jQuery aggiungi la riga della tabella . Funziona alla grande con le tabelle che hanno <tbody> e che non lo fanno. 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'));
La mia soluzione:
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
Utilizzo:
$('#Table').addNewRow(id1);
// 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);
La risposta di Neil è di gran lunga la migliore. Tuttavia, le cose diventano molto difficili. Il mio suggerimento sarebbe di usare le variabili per memorizzare gli elementi e aggiungerli alla gerarchia 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);
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Scrivi con una funzione javascript
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
Ho trovato questo plugin AddRow abbastanza utile per gestire le righe della tabella. Tuttavia, la soluzione di Luke sarebbe la soluzione migliore se hai solo bisogno di aggiungere una nuova riga.
Ecco un po 'di codice hacketi hacketi. Volevo mantenere un modello di riga in una HTML . Le righe di tabella 0 ... n vengono visualizzate al momento della richiesta e questo esempio ha una riga codificata e una riga modello semplificata. La tabella dei modelli è nascosta e il tag di riga deve trovarsi all'interno di una tabella valida oppure i browser potrebbero rilasciarlo dal DOM albero. L'aggiunta di una riga utilizza l'identificatore counter + 1 e il valore corrente viene mantenuto nell'attributo data. Garantisce che ogni riga ottenga parametri URL unici.
Ho eseguito i test su Internet & nbsp; Explorer & nbsp; 8, Internet & nbsp; Explorer & nbsp; 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (con Symbian 3), browser Android e Firefox beta.
<table id="properties">
<tbody>
<tr>
<th>Name</th>
<th>Value</th>
<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: do tutti i crediti al team di jQuery; meritano tutto. Programmazione JavaScript senza jQuery - Non voglio nemmeno pensare a quell'incubo.
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
Immagino di averlo fatto nel mio progetto, eccolo qui:
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');
});
});
});
Questa è la mia soluzione
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Dato che ho anche ottenuto un modo per aggiungere finalmente la riga o qualsiasi posto specifico, quindi penso che dovrei anche condividere questo:
Per prima cosa scopri la lunghezza o le righe:
var r=$("#content_table").length;
, quindi usa il codice seguente per aggiungere la tua 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 sono presenti 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 in un contenitore pronto (nascosto) sotto la tabella .. quindi se tu (o il designer) devi cambiare non è necessario modificare JS.
<table id="banner_holder" style="display:none;">
<tr>
<td colspan="3">
<div class="wide-banner"></div>
</td>
</tr>
</table>
<table id=myTable>
<tr><td></td></tr>
<style="height=0px;" tfoot></tfoot>
</table>
Puoi memorizzare nella cache la variabile piè di pagina e ridurre l'accesso al DOM (Nota: potrebbe essere meglio usare una riga falsa invece del piè di pagina).
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
se hai un'altra variabile puoi accedere al tag <td> come quello prova.
In questo modo spero possa essere utile
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);
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
aggiungerà una nuova riga al primo TBODY della tabella, senza dipendere da THEAD o TFOOT presenti.
(Non ho trovato informazioni su quale versione di jQuery .append() è presente questo comportamento.)
Puoi provarlo in questi esempi:
<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>
In quale esempio a b la riga viene inserita dopo 1 2, non dopo 3 4 nel secondo esempio. Se la tabella era vuota, jQuery crea <=> 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);
Riferisci datatables fnAddData API datatables
In modo semplice:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
Se vuoi aggiungere row prima del <tr> primo figlio.
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
Se vuoi aggiungere <=> dopo l'ultimo <=> ultimo figlio.
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
