Wie man Tabellenzeilen in jQuery hinzufügt

1. append() / prepend() zum Hinzufügen einer Tabellenzeile in jQuery
2. Tabellenzeile mit JavaScript hinzufügen

In der heutigen HTML-Tabelle Element hat verschiedene innere Elemente wie tbody, thead, tfoot, um Zeilen von Daten enthalten.

<table id="test">
   <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Es führt zu der Notwendigkeit, beim Einfügen der Tabellenzeile in das DOM genau zu sein. jQuery kommt mit zwei Methoden des Einfügens innerhalb und außerhalb des DOM, um ein Element hinzuzufügen.

append() / prepend() zum Hinzufügen einer Tabellenzeile in jQuery

Um eine Zeile im Tabellenkörper mit jQuery hinzuzufügen, können wir die DOM inside Einfügemethoden append() oder prepend() verwenden, die ein Element an den Anfang oder das Ende des vorgeschlagenen Elements anfügen. Hier werden wir das Element tbody des Elements table mit id="test" auswählen, um eine Zeile danach einzufügen.

<script>
  $("#test>tbody").append("<tr><td>Test Row Append</td></tr>");
   //adding row to end and start
  $("#test>tbody").prepend("<tr><td>Test Row Prepend</td></tr>");</script>

Nachdem wir das folgende Skript ausgeführt haben, wird das neue HTML wie folgt aussehen.

<table id="test">
   <tbody>
        <tr><td>Test Row Prepend</td></tr>
        <tr><td>Foo</td></tr>
        <tr><td>Test Row Append</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Diese Methode zum Hinzufügen einer Zeile in jQuery kann durch die Verwendung der Methoden appendto() und prependto() erreicht werden.

<script>
 $("<tr><td>Test Row Append</td></tr>").appendto("#test>tbody");
 $("<tr><td>Test Row Prepend</td></tr>").prependto("#test>tbody");
</script>

Verwendung von Outside DOM Insertion zum Einfügen einer Tabellenzeile in jQuery

jQuery kommt mit .after() und .before() Methoden, um ein Element nach bzw. vor dem angegebenen Element einzufügen. Wir können diese Methoden verwenden, um genau zu sein, indem wir eine Tabellenzeile an verschiedenen Tabellenpositionen einfügen.

<table>
 <tbody>
  <tr><td> Item First </td></tr>
  <tr><td> Item Last </td></tr>
 </tbody>
</table>

<script>
 $("table tbody:nth-child(1)").after("<tr><td> Item Second </td></tr>");
	//adding second item after 1st item
 $("table tbody:last-child").before("<tr><td> Item Just Before Last</td></tr>");
	//adding an item before last item
<script>

Tabellenzeile mit JavaScript hinzufügen

Alternativ dazu gibt es auch eine native JavaScript-Methode zum Hinzufügen einer Zeile zur Tabelle mit der Funktion insertRow().

<table id="test">
  <tr>
    <td>row1 column1</td>
    <td>row1 column2</td>
  </tr>
</table>

<script>
function addrow(){
 var table = document.getElementById("test");
 var row = table.insertRow(0);
  //this adds row in 0 index i.e. first place
 row.innerHTML = "<td>row0 column1</td><td>row0 column2</td>";
}
</script>