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

Da ich auch eine Möglichkeit habe, eine Zeile am Ende oder an einer bestimmten Stelle hinzuzufügen, denke ich, dass ich diese auch teilen sollte:

Ermitteln Sie zunächst die Länge oder die Reihen:

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

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

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

Answer 2

Auf eine einfache Art und Weise:

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

Answer 3

Versuchen Sie dies: sehr einfache Methode

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

Answer 4

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

Answer 5

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

fügt eine neue Zeile in der erste TBODY der Tabelle, ohne Abhängigkeit von irgendwelchen THEAD o TFOOT vorhanden. (Ich habe keine Informationen gefunden, ab welcher Version von jQuery .append() dieses Verhalten vorhanden ist).

Sie können es an diesen Beispielen ausprobieren:

<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 welchem Beispiel a b Zeile wird eingefügt nach 1 2 , nicht nach 3 4 im zweiten Beispiel. Wenn die Tabelle leer wäre, erstellt jQuery TBODY für eine neue Zeile.