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

Ich empfehle

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

im Gegensatz zu

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

El first y last Schlüsselwörter wirken auf den ersten oder letzten zu startenden Tag, nicht auf den geschlossenen. Daher ist dies besser für verschachtelte Tabellen geeignet, wenn die verschachtelte Tabelle nicht geändert, sondern zur Gesamttabelle hinzugefügt werden soll. Zumindest habe ich dies festgestellt.

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

Answer 2

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

Ich kann auch eine kleine Funktion empfehlen, um weitere 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 String Composer 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 die Demo Fiddle

Answer 3

Dies lässt sich leicht mit der Funktion "last()" von jQuery bewerkstelligen.

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

Answer 4

Ich habe es auf diese Weise gelöst.

Verwendung von jquery

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

---

Schnipsel

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

Answer 5

Ich verwende diese Methode, wenn es keine Zeile in der Tabelle gibt und die einzelnen Zeilen recht kompliziert sind.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...