Fügen Sie eine Tabellenzeile in jQuery hinzu

Was ist die beste Methode in jQuery, um einer Tabelle als letzte Zeile eine zusätzliche Zeile hinzuzufügen?

Ist das akzeptabel?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Gibt es Einschränkungen für das, was Sie einer solchen Tabelle hinzufügen können (z. B. Eingaben, Auswahlen, Anzahl der Zeilen)?

Es ist nicht garantiert, dass der von Ihnen vorgeschlagene Ansatz Ihnen das gewünschte Ergebnis liefert - was wäre, wenn Sie tbodybeispielsweise Folgendes hätten :

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Sie würden mit dem folgenden enden:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Ich würde daher stattdessen diesen Ansatz empfehlen:

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

Sie können alles in die after()Methode aufnehmen, solange es sich um gültiges HTML handelt, einschließlich mehrerer Zeilen gemäß dem obigen Beispiel.

Update: Überprüfung dieser Antwort nach den letzten Aktivitäten mit dieser Frage. Augenlidlosigkeit macht einen guten Kommentar, dass es immer eine tbodyim DOM geben wird; Dies ist wahr, aber nur, wenn mindestens eine Zeile vorhanden ist. Wenn Sie keine Zeilen haben, gibt es keine, es sei tbodydenn, Sie haben selbst eine angegeben.

DaRKoN_ schlägt vor , an den tbodyInhalt anzuhängen , anstatt ihn nach dem letzten hinzuzufügen tr. Dies umgeht das Problem, keine Zeilen zu haben, ist aber immer noch nicht kugelsicher, da Sie theoretisch mehrere tbodyElemente haben könnten und die Zeile zu jedem von ihnen hinzugefügt würde.

Ich bin mir nicht sicher, ob es eine einzige einzeilige Lösung gibt, die jedes einzelne mögliche Szenario berücksichtigt. Sie müssen sicherstellen, dass der jQuery-Code mit Ihrem Markup übereinstimmt.

Ich denke, die sicherste Lösung besteht wahrscheinlich darin, sicherzustellen, dass Sie tableimmer mindestens eine tbodyin Ihr Markup aufnehmen, auch wenn es keine Zeilen enthält. Auf dieser Basis können Sie Folgendes verwenden, das funktioniert, egal wie viele Zeilen Sie haben (und auch mehrere tbodyElemente berücksichtigen ):

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

jQuery verfügt über eine integrierte Funktion zum schnellen Bearbeiten von DOM-Elementen.

Sie können Ihrer Tabelle Folgendes hinzufügen:

$("#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 mehrere attrAttribute haben kann, die gesetzt und abgerufen werden können, sowie textdas den Text zwischen dem Tag hier darstellt : <tag>text</tag>.

Dies ist ein ziemlich seltsamer Einzug, aber Sie können leichter sehen, was in diesem Beispiel vor sich geht.

Seitdem @Luke Bennett diese Frage beantwortet hat, haben sich die Dinge geändert . Hier ist ein Update.

jQuery seit Version 1.4 (?) erkennt automatisch , ob das Element , das Sie einfügen wollen (unter Verwendung eines der append(), prepend(), before()oder after()Methoden) a <tr>und fügt es in die erste <tbody>in der Tabelle oder wickelt es in ein neues , <tbody>wenn man nicht tut existieren.

Ja, Ihr Beispielcode ist akzeptabel und funktioniert gut mit jQuery 1.4+. ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Was wäre, wenn du ein <tbody>und ein hättest <tfoot>?

Sowie:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Dann würde es Ihre neue Zeile in die Fußzeile einfügen - nicht in den Körper.

Daher besteht die beste Lösung darin, ein <tbody>Tag einzuschließen und zu verwenden .append, anstatt .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Ich weiß, dass Sie nach einer jQuery-Methode gefragt haben. Ich habe viel gesucht und festgestellt, dass wir es besser machen können, als JavaScript direkt mit der folgenden Funktion zu verwenden.

tableObject.insertRow(index)

indexist eine Ganzzahl, die die Position der einzufügenden Zeile angibt (beginnt bei 0). Der Wert -1 kann ebenfalls verwendet werden. Dies führt dazu, dass die neue Zeile an der letzten Position eingefügt wird.

Dieser Parameter ist in Firefox und Opera erforderlich , in Internet Explorer, Chrome und Safari jedoch optional .

Wenn dieser Parameter nicht angegeben wird, wird insertRow()an der letzten Position in Internet Explorer und an der ersten Position in Chrome und Safari eine neue Zeile eingefügt.

Es funktioniert für jede akzeptable Struktur der HTML-Tabelle.

Im folgenden Beispiel wird eine letzte Zeile eingefügt (-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 Schlüsselwörter firstund lastfunktionieren für das erste oder letzte Tag, das gestartet und nicht geschlossen werden soll. Daher spielt sich dies bei verschachtelten Tabellen besser ab, wenn Sie nicht möchten, dass die verschachtelte Tabelle geändert wird, sondern stattdessen zur Gesamttabelle hinzugefügt werden. Zumindest habe ich das gefunden.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

Meiner Meinung nach ist der schnellste und klarste Weg

//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 Demo Fiddle

Ich kann auch eine kleine Funktion empfehlen, um mehr HTML-Änderungen vorzunehmen

//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 meinen Streicherkomponisten verwenden, können Sie dies wie folgt tun

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 Demo Fiddle

Dies kann einfach mit der Funktion "last ()" von jQuery erfolgen.

$("#tableId").last().append("<tr><td>New row</td></tr>");

Ich benutze diese Methode, wenn keine Zeile in der Tabelle vorhanden ist und 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 hier veröffentlichte Lösung wird die neue Zeile anstelle der Haupttabelle zur verschachtelten Tabelle hinzugefügt, wenn sich in der letzten Zeile eine verschachtelte Tabelle befindet. Eine schnelle Lösung (unter Berücksichtigung von 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 habe es so gelöst.

Verwenden von 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>

Ich hatte einige verwandte Probleme und versuchte, eine Tabellenzeile nach der angeklickten Zeile einzufügen. Alles ist in Ordnung, außer dass der Aufruf von .after () für die letzte Zeile nicht funktioniert.

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

Ich bin mit einer sehr unordentlichen Lösung gelandet:

Erstellen Sie die Tabelle wie folgt (ID für jede Zeile):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

usw ...

und dann :

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

Sie können diese großartige jQuery- Funktion zum Hinzufügen von Tabellenzeilen verwenden. Es funktioniert gut mit Tabellen, die haben <tbody>und die nicht. Außerdem wird der Colspan Ihrer letzten Tabellenzeile berücksichtigt.

Hier ist ein Anwendungsbeispiel:

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

Verwendungszweck:

$('#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);

Neils Antwort ist bei weitem die beste. Allerdings wird es sehr schnell chaotisch. Mein Vorschlag wäre, Variablen zu verwenden, um Elemente zu speichern und sie an die DOM-Hierarchie anzuhä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 Sie mit einer Javascript-Funktion

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

Ich fand dieses AddRow-Plugin sehr nützlich für die Verwaltung von Tabellenzeilen. Die Lösung von Luke passt jedoch am besten, wenn Sie nur eine neue Zeile hinzufügen müssen.

Hier ist ein Hacketi-Hack-Code. Ich wollte eine Zeilenvorlage in einer HTML- Seite pflegen . Die Tabellenzeilen 0 ... n werden zur Anforderungszeit gerendert, und dieses Beispiel enthält eine fest codierte Zeile und eine vereinfachte Vorlagenzeile. Die Vorlagentabelle ist ausgeblendet, und das Zeilentag muss sich in einer gültigen Tabelle befinden. Andernfalls können Browser es aus dem DOM- Baum löschen . Beim Hinzufügen einer Zeile wird der Bezeichner + 1 verwendet, und der aktuelle Wert wird im Datenattribut beibehalten. Es garantiert, dass jede Zeile eindeutige URL- Parameter erhält .

Ich habe Tests mit Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (mit Symbian 3), Android Stock und Firefox Beta-Browsern durchgeführt.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</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 Credits an das jQuery-Team. Sie verdienen alles. JavaScript-Programmierung ohne jQuery - Ich möchte nicht einmal an diesen Albtraum denken.

<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

Ich denke, ich habe in meinem Projekt getan, 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');
    });
      });
});

Das ist meine Lösung

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

Wenn Sie eine andere Variable haben, können Sie in einem solchen <td>Tag darauf zugreifen .

Auf diese Weise hoffe ich, dass es hilfreich wäre

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

Da ich auch eine Möglichkeit habe, endlich eine Zeile oder einen bestimmten Ort hinzuzufügen, denke ich, dass ich dies auch teilen sollte:

Finden Sie zuerst die Länge oder Reihen heraus:

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

und verwenden Sie dann den folgenden Code, um Ihre Zeile hinzuzufügen:

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

Um ein gutes Beispiel zum Thema hinzuzufügen, finden Sie hier eine funktionierende Lösung, wenn Sie eine Zeile an einer bestimmten Position hinzufügen müssen.

Die zusätzliche Zeile wird nach der 5. Zeile oder am Ende der Tabelle hinzugefügt, wenn weniger als 5 Zeilen vorhanden sind.

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

Ich habe den Inhalt in einen fertigen (versteckten) Container unter der Tabelle gestellt. Wenn Sie (oder der Designer) Änderungen vornehmen müssen, ist es nicht erforderlich, den 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ßzeilenvariable zwischenspeichern und den Zugriff auf DOM reduzieren (Hinweis: Möglicherweise ist es besser, eine gefälschte Zeile anstelle der Fußzeile zu verwenden).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

fügt der ersten TBODY Tabelle eine neue Zeile hinzu , ohne von einer THEADoder einer TFOOTvorhandenen abhängig zu sein . (Ich habe keine Informationen gefunden, aus welcher Version von jQuery .append()dieses Verhalten vorliegt.)

Sie können es in diesen Beispielen versuchen:

<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 welcher Beispielzeile a bwird nach 1 2, 3 4im zweiten Beispiel nicht nach eingefügt . Wenn die Tabelle leer war, erstellt jQuery TBODYeine neue Zeile.

Wenn Sie das Datatable JQuery-Plugin verwenden, können Sie es 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 Datatables fnAddData Datatables API

Auf einfache Weise:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

Versuchen Sie dies: sehr einfache Art und Weise

$('<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>