Fügen Sie eine Tabellenzeile in jQuery hinzu

2425

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

Darryl Hein
quelle
2
Thxs Ash. Auch ich lerne gerade jQuery und finde es schwierig, den besten Weg zu finden, besonders einfache Dinge. Der Grund, warum es sich um zwei Fragen handelt, ist, dass ich eine gepostet habe und dann fast eine Stunde später festgestellt habe, dass ich die andere hätte einfügen sollen und nicht gedacht habe, dass ich die erste ändern sollte.
Darryl Hein
30
Aus diesem Grund: google.com/search?q=jquery+add+table+row
Darryl Hein
17
Zu Ihrer Information - Vermeiden Sie die Verwendung mehrerer Anhänge (verlangsamt die Leistung erheblich), bauen Sie lieber Ihre Zeichenfolge auf oder verwenden Sie einen JavaScript-Join, der viel schneller ist.
Gerrit Brink
Nur für den Fall, dass die Zeile zu komplex ist, halte ich die erste Zeile mit der erforderlichen Struktur ausgeblendet, erstelle einen Klon und ändere den Text und füge sie nach der ersten Zeile ein. Wenn Sie also Daten aus einer Ajax-Antwort abrufen, wird Ihre Tabelle erstellt Klonen Sie es außerhalb der Schleife und verwenden Sie es dann, um den Inhalt innerhalb der Schleife zu ändern. $ ("# mainTable tbody"). append (row); Zeile ist die modifizierte
Klonkopie

Antworten:

2143

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>');
Luke Bennett
quelle
6
@Rama, nein wird es nicht. Es muss eine bessere Lösung geben.
Brian Liang
40
Es wird immer jemanden im DOM geben.
Augenlidlosigkeit
4
Ein leerer tbody validiert Ihr HTML jedoch nicht
2ni
40
Eine geringfügige Verbesserung der ansonsten schönen Lösung wäre die Optimierung der Selektoren. Sie können Geschwindigkeitsverbesserungen erzielen mit: $('#myTable').find('tbody:last')anstelle von $('#myTable > tbody:last').
Erik Töyrä Silfverswärd
2
"Augenlidlosigkeit macht einen guten Kommentar, dass es immer einen Körper im DOM geben wird" - ich habe es nur ohne Körper versucht und es hat nicht funktioniert - es funktioniert nur, wenn es einen Körper gibt.
BrainSlugs83
771

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.

Neil
quelle
60
Beachten Sie für diejenigen, die dies versuchen, sorgfältig die Positionen der Klammern. Die richtige Verschachtelung ist entscheidend.
Ryan Lundy
9
Was ist mit den schließenden Tags? Sind sie nicht notwendig?
Senfo
9
Sollte $ ("# tableClassname") nicht tatsächlich $ ("# tableID") sein, da sich das Hash-Symbol auf die ID und nicht auf den Klassennamen bezieht?
Dave
7
Ich hasse solche seltsamen Verkettungen. Es ist ein Albtraum, den Code voll von solchen Dingen zu halten.
Bancer
4
@senfo Hinzufügen Kind - Elemente werden diese automatisch erstellen.
Michel de Ruiter
308

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>');
Salman von Abbas
quelle
2
Seien Sie vorsichtig mit dieser Annahme. Wenn Ihr angehängtes Markup mit \ n oder \ n \ r beginnt, erkennt jQuery nicht, dass es sich um ein <tr> handelt, und hängt es an die <table> und nicht an den <tbody> an. Ich bin gerade auf dieses Markup gestoßen, das von einer MVC-Ansicht generiert wurde, die am Anfang eine zusätzliche Zeile hatte.
Mik
@Mik danke für das Heads Up! Ich denke, das yourString.trim()könnte Abhilfe schaffen.
Salman von Abbas
Natürlich, aber man muss darüber nachdenken. Gewöhnen Sie sich besser an, an den <tbody> anzuhängen, wenn Sie wissen, dass es einen gibt.
Mik
Für jQuery 3.1 muss weiterhin ein tbody angegeben werden. Überprüfen Sie es hier: jsfiddle.net/umaj5zz9/2
user984003
Dadurch wird meine Seite aktualisiert. Wie kann ich das verhindern?
Avi
168

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>");
ChadT
quelle
10
Sie haben Ihren Fuß falsch implementiert. Es sollte vor dem tbody kommen, nicht danach - siehe w3.org/TR/html4/struct/tables.html#h-11.2.3 . Daher funktioniert meine Lösung immer noch, es sei denn, Sie brechen die Standards (in diesem Fall können Sie erwarten, dass auch andere Dinge schief gehen). Meine Lösung funktioniert auch, unabhängig davon, ob Sie einen Tbody haben oder nicht, während Ihr Vorschlag fehlschlägt, wenn kein Tbody vorhanden ist.
Luke Bennett
6
Trotz aller Fehler im <tfoot /> ist dies eine bessere Lösung. Wenn kein <tbody /> vorhanden ist, können Sie dieselbe Technik auf der <table /> selbst anwenden. Während die "akzeptierte Antwort" eine zusätzliche Prüfung erfordert, um festzustellen, ob eine Zeile vorhanden ist oder nicht. (Ich weiß, dass das OP diese Anforderung nicht spezifiziert hat, aber es spielt keine Rolle - dieser Beitrag steht bei einer Google-Suche nach dieser Technik an erster Stelle, und die beste Antwort ist nicht die oberste.)
CleverPatrick
5
Dies ist eine bessere Lösung als zu finden. In mehreren Iterationen scheint diese Technik immer zu funktionieren. Als zusätzliche Information können Sie .prepend verwenden, um die Zeile am Anfang der Tabelle hinzuzufügen, während .append die Zeile am Ende der Tabelle platziert.
Lance Cleveland
Dies ist falsch, es wird Zeile an jede Zeile in tbody anhängen
garg10may
@ garg10may Kannst du raten wie? Es zielt auf den Körper ab, nicht auf ein untergeordnetes Element.
ChadT
64

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.

Shashwat
quelle
2
Das Problem bei dieser Methode (wie ich gerade herausgefunden habe) ist, dass wenn Sie eine Fußzeile haben, diese NACH der Fußzeile mit -1 als Index hinzugefügt wird.
kdubs
35

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>
Vorhang
quelle
32

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

schwülste
quelle
Wenn Sie mehrere haben tbody, können Sie mehrere Beilagen erhalten
Mark Schultheiss
Ja, das können Sie :) Sie können versuchen $("SELECTOR").last(), Ihre Tag-Sammlung
einzuschränken
23

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

$("#tableId").last().append("<tr><td>New row</td></tr>");
Nischal
quelle
9
Gute Idee, aber ich denke, Sie möchten den Selektor in #tableId tr ändern, da Sie jetzt die Tabelle erhalten und die Zeile unter der Tabelle hinzufügen.
Darryl Hein
17

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

...
Dominic
quelle
Vielen Dank. Dies ist eine sehr elegante Lösung. Mir gefällt, wie die Vorlage im Raster bleibt. Es macht den Code so viel einfacher und einfacher zu lesen und zu warten. Danke noch einmal.
Rodney
14

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>');
Oshua
quelle
14

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>

Anton vBR
quelle
Ich kann jetzt erfolgreich dynamische Daten in eine neue Zeile einfügen, aber nach Verwendung dieser Methode funktioniert mein benutzerdefinierter Filter nicht. Haben Sie eine Lösung dafür? Vielen Dank
Arjun
Ich denke, Sie müssen eine Art Update-Funktion aufrufen. Ich muss ohne Beispiel erzählen.
Anton vBR
13

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);
Avron Olshewsky
quelle
Ich denke, dies sollte eine neue Frage sein, anstatt eine Antwort auf eine bestehende ...
Darryl Hein
11

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'));
Usbekjon
quelle
Ich kann nicht sehen, dass das schrecklich nützlich ist. Es wird lediglich eine leere Tabellenzeile zu einer Tabelle hinzugefügt. Wenn nicht immer, möchten Sie normalerweise eine neue Tabellenzeile mit einigen Daten hinzufügen.
Darryl Hein
1
Aber das ist normalerweise das, was Sie wollen. Mit dieser Funktion können Sie jeder Ihrer Tabellen eine leere Zeile hinzufügen, unabhängig davon, wie viele Spalten und Zeilenbereiche Sie haben. Dadurch wird sie zur UNIVERSAL-Funktion. Von dort aus können Sie beispielsweise mit $ ('. Tbl tr: last td') weitermachen. Der springende Punkt ist, universelle Funktion zu haben !!!
Usbekjon
Wenn Ihre Funktion auch Daten zu Ihren neuen Zeilen hinzufügt, können Sie diese beim nächsten Projekt nicht mehr verwenden. Was ist der Sinn?! Meiner Meinung nach müssen Sie es jedoch nicht teilen ...
Usbekjon
Wenn Sie die Funktion vorschlagen, die nicht Teil eines allgemeinen Pakets ist, geben Sie hier den vollständigen Funktionscode ein. Vielen Dank.
Jewgenij Afanasjew
10

Meine Lösung:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

Verwendungszweck:

$('#Table').addNewRow(id1);
Ricky G.
quelle
Was ist, wenn es keine tbodyTabelle gibt? bedeutet, dass es eine Zeile direkt innerhalb des <table>Elements geben kann, auch wenn keine Überschrift vorhanden ist.
Shashwat
Ich würde Ihnen wärmstens empfehlen, Ihr Markup mit <TBody> zu haben, damit es den HTML 5-Standards entspricht. Wenn nicht, können Sie immer $ (this) .append ('<tr id = "' + rowId + '"> </ ausführen) tr> '); das fügt nur eine Zeile in der Tabelle an.
Ricky G
Ich denke, wenn Sie dies zu einer Funktion machen wollen, könnten Sie vielleicht ein jQuery-Objekt für die neue Zeile zurückgeben, damit es verkettbar ist.
Chaos
10
    // 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);
Pankaj Garg
quelle
Obwohl dies eine Antwort sein mag, ist sie für einen Besucher später nicht sehr nützlich ... Bitte fügen Sie Ihrer Antwort eine Erklärung hinzu.
Jayan
9

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);
GabrielOshiro
quelle
9
<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>';
Jakir Hossain
quelle
9

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.

Vitalii Fedorenko
quelle
7

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.

Wen
quelle
7
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
Vivek S.
quelle
7

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');
    });
      });
});
SNEH PANDYA
quelle
7

Das ist meine Lösung

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Daniel Ortegón
quelle
7

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);
MEAbid
quelle
6

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);
Jaid07
quelle
6

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>
d.raev
quelle
6
<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>")
Pavel Shkleinik
quelle
5
$('#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.

Alexey Pavlov
quelle
5

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

Praveena M.
quelle
5

Auf einfache Weise:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
vipul sorathiya
quelle
Könnten Sie bitte Ihre Antwort näher erläutern und etwas mehr Beschreibung der von Ihnen bereitgestellten Lösung hinzufügen?
Abarisone
4

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>

Rajmobiapp
quelle