Hinzufügen von Tabelle Zeile in jQuery
https://stackoverflow.com/questions/171027
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Was ist die beste Methode in jQuery, um eine zusätzliche Zeile zu einer Tabelle als Letzte Zeile?
Ist das akzeptabel?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Gibt es Einschränkungen zu was Sie hinzufügen können, um einen Tisch wie dieser (wie Eingänge, wählt, Anzahl der Zeilen)?
Lösung
Der Ansatz, den Sie vorschlagen, das Ergebnis nicht geben Sie garantiert Sie suchen - was ist, wenn Sie ein tbody zum Beispiel hatte:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Sie würden mit dem folgenden Ende:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Ich möchte daher diesen Ansatz empfehlen stattdessen:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Sie können alles innerhalb des after() Verfahren umfassen, solange sie gültig ist HTML, einschließlich mehrerer Zeilen gemäß dem obigen Beispiel.
Update: Neubetrachtung diese Antwort nach dem jüngsten Aktivitäten mit dieser Frage. eyelidlessness macht einen guten Kommentar, dass es immer ein tbody im DOM sein; das ist wahr, aber nur, wenn es mindestens eine Zeile. Wenn Sie keine Zeilen haben, wird es keine tbody sein, wenn Sie selbst eine Beurteilung angegeben haben.
schlägt zum tbody anhängt, anstatt das Hinzufügen von Inhalten nach dem letzten tr. Dies wird rund um das Thema keine Zeilen mit, ist aber noch nicht kugelsicher wie Sie theoretisch mehrere tbody Elemente und die Zeile hinzugefügt, um jeden von ihnen bekommen würde haben könnte.
Mit einem Gewicht alles auf, ich bin nicht sicher, dass es eine einzige einzeilige Lösung, die für jede einzelne mögliche Szenario berücksichtigt. Sie müssen die jQuery-Code stellen Sie sicher, mit Ihrem Markup deckt.
Ich denke, die sicherste Lösung wahrscheinlich Ihre table immer um sicherzustellen, dass mindestens ein tbody in Ihrem Markup enthalten, auch wenn es keine Zeilen hat. Auf dieser Basis können Sie die folgende verwenden, die jedoch viele Zeilen arbeiten Sie (und auch die Ursache für mehrere tbody Elemente) haben:
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Andere Tipps
jQuery verfügt über eine integrierte in Anlage DOM-Elemente im Fluge zu manipulieren.
Sie können alles auf den Tisch wie folgt hinzu:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
Die $('<some-tag>') Sache in jQuery ist ein Tag-Objekt, das mehr attr Attribute haben kann, die eingestellt werden können und erhalten, sowie text, die den Text zwischen dem Tag steht hier:. <tag>text</tag>
Dies ist ein paar ziemlich seltsame Einrücken, aber es ist einfacher für Sie, um zu sehen, was in diesem Beispiel vor sich geht.
So haben sich die Dinge seitdem @Luke Bennett geändert diese Frage beantwortet. Hier ist ein Update.
jQuery seit Version 1.4 (?) Erkennt automatisch, wenn das Element, das Sie einfügen wollen (unter Verwendung eines beliebigen der append() , prepend() , before() oder after() Verfahren) ist ein <tr> und fügt sie in die erste <tbody> in Ihrer Tabelle oder wickelt es in ein neues <tbody> wenn man nicht existiert.
Also ja Ihr Beispielcode ist akzeptabel und wird mit jQuery 1.4+ gut funktionieren. ;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Was ist, wenn Sie ein <tbody> und <tfoot> haben?
Wie zum Beispiel:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Dann wäre es Ihre neue Zeile in der Fußzeile einfügen - nicht auf den Körper
. Daher ist die beste Lösung ist es, einen <tbody> Tag und Verwendung .append aufzunehmen, anstatt .after.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Ich weiß, dass Sie eine jQuery-Methode gefragt. Ich sah viel und finde, dass wir es in einer besseren Art und Weise tun können, als die Verwendung von JavaScript direkt durch die folgende Funktion.
tableObject.insertRow(index)
index eine ganze Zahl, die die Position der Reihe (beginnt bei 0) zum Einfügen angibt. Der Wert von -1 kann auch verwendet werden; die sich ergeben, daß die neue Zeile wird an der letzten Position eingefügt werden.
Dieser Parameter ist erforderlich in Firefox und Opera , aber es ist optional in Internet Explorer, Chrome und Safari .
Wenn diese Parameter weggelassen wird, insertRow() fügt eine neue Zeile an der letzten Position in Internet Explorer und in der ersten Position in Chrome und Safari.
Es wird für jede akzeptable Struktur der HTML-Tabelle arbeiten.
Im folgenden Beispiel wird eine Zeile in den letzten Einsatz (-1 wird als Index verwendet):
<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>
Ich hoffe, es hilft.
Ich empfehle
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
im Gegensatz zu
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
Die first und last Keywords auf dem ersten oder letzten Tag arbeiten begonnen werden, nicht geschlossen. Deshalb spielt das schönere mit verschachtelten Tabellen, wenn Sie die verschachtelte Tabelle geändert wird nicht wollen, sondern auf die gesamte Tabelle hinzuzufügen. Zumindest ist es das, was ich gefunden habe.
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>
Meiner Meinung nach die Schnellste und übersichtlich ist
//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 ist die demo Fiddle
Auch ich kann empfehlen, eine kleine Funktion, um mehrere html-änderungen
//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] : '';
});
}
}());
Wenn Sie mit meinem string Komponist Sie können dies tun, wie
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 ist die demo Fiddle
Dies kann getan werden, einfach die "letzte ()" Funktion von jQuery verwenden.
$("#tableId").last().append("<tr><td>New row</td></tr>");
Ich verwende diese Weise, wenn es keine Zeile in der Tabelle ist, sowie jede Zeile ziemlich kompliziert ist.
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
Für die beste Lösung hier gepostet, wenn es in der letzten Zeile eine verschachtelte Tabelle ist, wird die neue Zeile in der geschachtelten Tabelle hinzugefügt werden, anstelle der Haupttabelle. Eine schnelle Lösung (unter Berücksichtigung der Tabellen mit / ohne tbody und Tabellen mit verschachtelten 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);
}
}
Anwendungsbeispiel:
add_new_row('#myTable','<tr><td>my new row</td></tr>');
ich einige damit zusammenhängende Fragen hatte, versucht, eine Tabellenzeile nach dem Anklicken Zeile einzufügen. Alles ist in Ordnung, außer der .after () Aufruf für die letzte Zeile nicht funktioniert.
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
ich mit einer sehr unordentlichen Lösung gelandet:
Erstellen der Tabelle wie folgt (ID für jede Reihe):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
etc ...
und dann:
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
Ich löste es auf diese Weise.
Mit 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>
Sie können diese große jQuery Tabellenzeile Funktion hinzuzufügen. Es funktioniert großartig mit Tabellen, die <tbody> haben und dass dies nicht tun. Auch dauert es in die Betrachtung der colspan Ihrer letzten Tabellenzeile.
Hier ist ein Beispiel für die Verwendung:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Meine Lösung:
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
Nutzung:
$('#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);
Neil Antwort ist bei weitem das beste. Doch die Dinge wirklich schnell chaotisch. Mein Vorschlag wäre, Variablen zu verwenden, um Elemente zu speichern und sie an die DOM-Hierarchie anhängen.
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>
Schreiben mit einer JavaScript-Funktion
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
Ich fand diese AddRow Plugin sehr nützlich für Tabellenzeilen zu verwalten. Obwohl, würde Lukes Lösung die beste Lösung sein, wenn Sie nur eine neue Zeile hinzufügen müssen.
Hier ist etwas hacketi Hack Code. Ich wollte eine Zeilenvorlage in einer HTML Seite halten. Tabellenzeilen 0 ... n werden an Anforderungszeit wiedergegeben, und dieses Beispiel hat eine fest codierte Zeile und eine vereinfachte Schablonenreihe. Die Vorlage Tabelle ist versteckt, und der Zeilen-Tag innerhalb einer gültigen Tabelle sein oder Browser fallen kann es aus dem DOM Baum. Hinzufügen einer Zeile verwendet Zähler + 1 Identifikator, und der Stromwert wird in dem Datenattribut gehalten. Es garantiert jede Reihe bekommt einzigartige URL Parameter.
Ich habe laufen Tests auf dem Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (mit Symbian 3), Android Lager und Firefox beta-Browser.
<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: Ich gebe alle Kredite an das jQuery-Team; sie verdienen alles. JavaScript-Programmierung ohne jQuery -. Ich will über diesen Alptraum nicht einmal denken
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
Ich glaube, ich in meinem Projekt gemacht haben, hier ist es:
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');
});
});
});
Dies ist meine Lösung
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Wie ich auch haben eine viel zu Zeile zuletzt hinzufügen oder einen bestimmten Ort, so denke ich, ich sollte dies auch teilen:
Sie zuerst die Länge oder Zeilen herausfinden:
var r=$("#content_table").length;
und dann unter Code benutzen, um Ihre Zeile hinzuzufügen:
$("#table_id").eq(r-1).after(row_html);
ein gutes Beispiel zum Thema hinzuzufügen, hier arbeitet Lösung, wenn Sie eine Reihe an bestimmten Position hinzufügen müssen.
Die zusätzliche Zeile wird nach der fünften Reihe, oder am Ende der Tabelle hinzugefügt, wenn es weniger als 5 Zeilen.
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);
}
habe ich den Inhalt auf einen bereit (verdeckten) Container unter dem Tisch ..so, wenn Sie (oder der Designer) geändert werden müssen, ist nicht erforderlich, die JS zu bearbeiten.
<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>
Sie können die Fußzeile Variable zwischenspeichern und den Zugriff auf DOM reduzieren. (Hinweis: kann es besser sein, eine gefälschte Reihe statt Fußzeile zu verwenden)
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
Wenn Sie eine andere Variable haben, können Sie Zugriff auf in <td> Tag wie dieser Versuch.
So kann ich es hoffen wäre hilfreich,
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>');
wird eine neue Zeile in dem ersten TBODY der Tabelle hinzufügen, ohne je irgend THEAD oder TFOOT vorhanden.
(Ich habe keine Informationen finden, von denen Version von jQuery .append() dieses Verhalten vorhanden ist.)
Sie können es versuchen, in diesen Beispielen:
<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 dem Beispiel a b Zeile wird nach 1 2 eingefügt, nicht nach dem 3 4 im zweiten Beispiel. Wenn die Tabelle leer war, erstellt jQuery TBODY für eine neue Zeile.
Wenn Sie Datatable JQuery-Plugin verwenden, können Sie versuchen.
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);
Siehe Datentabellen fnAddData Datentabellen API
Auf einfache Weise:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
Wenn Sie row vor dem <tr> ersten Kind hinzufügen mögen.
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
Wenn Sie row nach dem <tr> letztes Kind.
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
