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

Bei der hier geposteten besten Lösung wird die neue Zeile in die verschachtelte Tabelle anstelle der Haupttabelle eingefü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);
    }
}

Beispiel für die Verwendung:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

Answer 2

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

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

Ich bin bei 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);

Answer 3

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

Answer 4

Sie können diese großartige jQuery Tabellenzeile hinzufügen Funktion. Sie funktioniert gut mit Tabellen, die Folgendes haben <tbody> und die, die es nicht tun. Außerdem wird der Spaltenabstand der letzten Tabellenzeile berücksichtigt.

Hier ist ein Anwendungsbeispiel:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

Answer 5

Meine Lösung:

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

Verwendung:

$('#Table').addNewRow(id1);