Wat is de beste methode in jQuery om een extra rij als laatste rij aan een tabel toe te voegen?
Is dit acceptabel?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Zijn er beperkingen aan wat u aan een tabel als deze kunt toevoegen (zoals invoer, selecties, aantal rijen)?
Antwoord 1, autoriteit 100%
De aanpak die u voorstelt, geeft niet gegarandeerd het resultaat waarnaar u op zoek bent – wat als u bijvoorbeeld een TBODYhad:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Je zou eindigen met het volgende:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Ik zou daarom in plaats daarvan deze aanpak aanbevelen:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Je kunt alles in de after()-methode opnemen, zolang het maar geldige HTML is, inclusief meerdere rijen zoals in het bovenstaande voorbeeld.
Update:dit antwoord opnieuw bekijken na recente activiteit met deze vraag. ooglidloosheid maakt een goede opmerking dat er altijd een TBODYin de DOM zal zijn; dit is waar, maar alleen als er ten minste één rij is. Als je geen rijen hebt, is er geen TBODYtenzij je er zelf een hebt opgegeven.
DaRKoN_ suggereerttoe te voegen aan de TBODYin plaats van inhoud toe te voegen na de laatste tr. Dit lost het probleem op van het ontbreken van rijen, maar is nog steeds niet kogelvrij, aangezien je in theorie meerdere TBODY-elementen zou kunnen hebben en de rij aan elk van hen zou worden toegevoegd.
Als ik alles afweeg, weet ik niet zeker of er één enkele oplossing is die alle mogelijke scenario’s dekt. U moet ervoor zorgen dat de jQuery-code overeenkomt met uw opmaak.
Ik denk dat de veiligste oplossing waarschijnlijk is om ervoor te zorgen dat uw tablealtijd ten minste één TBODYin uw opmaak bevat, zelfs als deze geen rijen heeft. Op basis hiervan kunt u het volgende gebruiken, ongeacht hoeveel rijen u heeft (en ook rekening houden met meerdere TBODY-elementen):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Antwoord 2, autoriteit 36%
jQuery heeft een ingebouwde mogelijkheid om DOM-elementen on-the-fly te manipuleren.
Je kunt alles als volgt aan je tabel toevoegen:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
Het $('<some-tag>')ding in jQuery is een tag-object dat verschillende attr-attributen kan hebben die kunnen worden ingesteld en opgehaald, zoals evenals text, die de tekst tussen de tag hier vertegenwoordigt: <tag>text</tag>.
Dit is een behoorlijk raar inspringen, maar het is gemakkelijker voor u om te zien wat er in dit voorbeeld aan de hand is.
3, Autoriteit 14%
Dus dingen zijn al sinds @Luke Bennett beantwoord deze vraag. Hier is een update.
jQuery sinds versie 1.4 (?) detecteert automatisch als het element dat u probeert in te voegen (met behulp van een van de append(), prepend(), before(), of after()methoden) is een <tr>en voegt deze in de eerste <tbody>in uw tabel of wikkelt het in een nieuwe <tbody>als men niet bestaat.
Dus ja, uw voorbeeldcode is acceptabel en werkt prima met jQuery 1.4+. 😉
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Antwoord 4, autoriteit 3%
Ik weet dat je om een jQuery-methode hebt gevraagd. Ik heb veel gekeken en ontdekte dat we het op een betere manier kunnen doen dan JavaScript rechtstreeks te gebruiken met de volgende functie.
tableObject.insertRow(index)
indexis een geheel getal dat de positie aangeeft van de rij die moet worden ingevoegd (begint bij 0). De waarde van -1 kan ook worden gebruikt; wat ertoe leidt dat de nieuwe rij op de laatste positie wordt ingevoegd.
Deze parameter is vereist in Firefox en Opera, maar is optioneel in Internet Explorer, Chromeen Safari.
Als deze parameter wordt weggelaten, insertRow()voegt een nieuwe rij in op de laatste positie in Internet Explorer en op de eerste positie in Chrome en Safari.
Het werkt voor elke acceptabele structuur van de HTML-tabel.
In het volgende voorbeeld wordt een rij als laatste ingevoegd (-1 wordt gebruikt als index):
<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>
Ik hoop dat het helpt.
Antwoord 5, autoriteit 2%
Ik raad aan
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
in tegenstelling tot
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
De trefwoorden firsten lastwerken op de eerste of laatste tag die moet worden gestart, niet op gesloten. Daarom speelt dit prettiger met geneste tabellen, als u niet wilt dat de geneste tabel wordt gewijzigd, maar in plaats daarvan wordt toegevoegd aan de algemene tabel. Tenminste, dit is wat ik heb gevonden.
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>
Antwoord 6, autoriteit 2%
Naar mijn mening is de snelste en duidelijkste manier
//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>');
hier is de demo Fiddle
Ik kan ook een kleine functie aanbevelen om meer html-wijzigingen aan te brengen
//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] : '';
});
}
}());
Als je mijn snaarcomponist gebruikt, kun je dit als volgt doen
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'
}));
Hier is een demo
Fiddle
Antwoord 7
Dit kan eenvoudig worden gedaan met de functie “last()” van jQuery.
$("#tableId").last().append("<tr><td>New row</td></tr>");
Antwoord 8
Ik gebruik deze manier als er geen rij in de tabel staat, en elke rij is behoorlijk ingewikkeld.
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
Antwoord 9
Ik heb het op deze manier opgelost.
JQuery gebruiken
$('#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>Antwoord 10
Voor de beste oplossing die hier wordt gepost, als er een geneste tabel op de laatste rij is, wordt de nieuwe rij toegevoegd aan de geneste tabel in plaats van aan de hoofdtabel. Een snelle oplossing (rekening houdend met tafels met/zonder tbody en tafels met geneste tabellen):
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);
}
}
Gebruiksvoorbeeld:
add_new_row('#myTable','<tr><td>my new row</td></tr>');
Antwoord 11
Ik had een aantal gerelateerde problemen bij het invoegen van een tabelrij na de aangeklikte rij. Alles is in orde, behalve dat de aanroep .after() niet werkt voor de laatste rij.
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
Ik kreeg een zeer slordige oplossing:
maak de tabel als volgt (id voor elke rij):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
enz…
en dan :
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
Antwoord 12
// 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);
13
U kunt deze geweldige jQuery- Voeg tabelrij toe functie. Het werkt geweldig met tafels die <tbody>en dat niet. Ook neemt het rekening met de Colspan van uw laatste tafelrij.
Hier is een voorbeeldgebruik:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
14
Mijn oplossing:
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
Gebruik:
$('#Table').addNewRow(id1);
15
Neil’s antwoord is veruit de beste. Dingen worden echter erg snel rommelig. Mijn suggestie zou zijn om variabelen te gebruiken om elementen op te slaan en ze aan de DOM-hiërarchie toe te voegen.
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);
Antwoord 16
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Schrijf met een javascript-functie
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
Antwoord 17
Ik vond deze AddRow-plug-inbest handig voor het beheren van tabelrijen. Luke’s oplossingzou echter het beste passen als je alleen een nieuwe rij hoeft toe te voegen.
Antwoord 18
Dit is mijn oplossing
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Antwoord 19
Hier is enkele Hacketi-hackcode. Ik wilde een rij sjabloon onderhouden in een HTML pagina. Tafelrijen 0 … n worden op aanvraag tijdstip weergegeven en dit voorbeeld heeft één hardcode rij en een vereenvoudigde sjabloonrij. De sjabloontabel is verborgen en het rij-tag moet binnen een geldige tabel zijn of browsers kunnen het vallen van de DOM Boom. Het toevoegen van een rij gebruikt teller + 1-identifier en de huidige waarde wordt gehandhaafd in het gegevenskenmerk. Het garandeert elke rij unique URL parameters.
Ik heb tests op internet & nbsp; Explorer & NBSP; 8, Internet & Nbsp; Explorer & NBSP; 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (met Symbian 3), Android-voorraad- en Firefox Beta-browsers.
<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: ik geef alle credits aan het jQuery-team; ze verdienen alles. JavaScript-programmering zonder jQuery – ik wil niet eens aan die nachtmerrie denken.
Antwoord 20
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
Antwoord 21
Ik denk dat ik het in mijn project heb gedaan, hier is het:
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');
});
});
});
Antwoord 22
als je een andere variabele hebt die je kunt openen in de <td>-tag, zoals dat proberen.
Op deze manier hoop ik dat het nuttig zou zijn
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);
Antwoord 23
Omdat ik ook een manier heb om eindelijk een rij toe te voegen of een specifieke plaats, dus ik denk dat ik dit ook moet delen:
Ontdek eerst de lengte of rijen:
var r=$("#content_table").length;
en gebruik dan onderstaande code om je rij toe te voegen:
$("#table_id").eq(r-1).after(row_html);
Antwoord 24
Om een goed voorbeeld van het onderwerp toe te voegen, hier is een werkende oplossing als u een rij op een specifieke positie moet toevoegen.
De extra rij wordt toegevoegd na de 5e rij, of aan het einde van de tabel als er minder dan 5 rijen zijn.
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);
}
Ik heb de inhoud op een kant-en-klare (verborgen) container onder de tabel gezet..dus als jij (of de ontwerper) het moet wijzigen, is het niet nodig om de JS te bewerken.
<table id="banner_holder" style="display:none;">
<tr>
<td colspan="3">
<div class="wide-banner"></div>
</td>
</tr>
</table>
Antwoord 25
<table id=myTable>
<tr><td></td></tr>
<style="height=0px;" tfoot></tfoot>
</table>
Je kunt de footer-variabele cachen en de toegang tot DOM verminderen (Opmerking: misschien is het beter om een neprij te gebruiken in plaats van footer).
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
Antwoord 26
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
voegt een nieuwe rij toe aan de eersteTBODYvan de tabel, zonder afhankelijk te zijn van een THEADof TFOOTaanwezig.
(Ik heb geen informatie gevonden van welke versie van jQuery .append()dit gedrag aanwezig is.)
U kunt het in deze voorbeelden proberen:
<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 welk voorbeeld a brij wordt ingevoegd na 1 2, niet na 3 4in het tweede voorbeeld. Als de tabel leeg was, maakt jQuery TBODYaan voor een nieuwe rij.
Antwoord 27
Als je de Datatable JQuery-plug-in gebruikt, kun je het proberen.
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);
Raadpleeg Datatables fnAddData Datatables API
Antwoord 28
Op een eenvoudige manier:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
Antwoord 29
Probeer dit: een heel eenvoudige manier
$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>