Tabellenzeile in jQuery hinzufügen

Question

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

Ist das akzeptabel?

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

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

Answer 1

Neils Antwort ist bei weitem die beste. Allerdings werden die Dinge sehr schnell unübersichtlich. Mein Vorschlag wäre, Variablen zu verwenden, um Elemente zu speichern und fügen Sie sie an die DOM-Hierarchie.

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

Answer 2

Ich fand dies AddRow-Plugin sehr nützlich für die Verwaltung von Tabellenzeilen. Allerdings ist Luke's Lösung wäre am besten geeignet, wenn Sie nur eine neue Zeile hinzufügen wollen.

Answer 3

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

Answer 4

Dies ist meine Lösung

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

Answer 5

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

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