Aggiungi riga di tabella in jQuery

1. append() / prepend() per aggiungere una riga di tabella in jQuery
2. Aggiungi riga di tabella utilizzando JavaScript

Al giorno d’oggi l’elemento tabella HTML ha vari elementi interni come tbody, thead, tfoot per contenere righe di dati.

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

Nasce la necessità di essere precisi durante l’inserimento della riga della tabella nel DOM. jQuery viene fornito con due metodi di inserimento DOM interno ed esterno per aggiungere un elemento.

append() / prepend() per aggiungere una riga di tabella in jQuery

Per aggiungere una riga nel corpo della tabella usando jQuery, possiamo usare DOM all’interno dei metodi di inserimento di append() o prepend() che aggiunge un elemento all’inizio o alla fine dell’elemento suggerito. Qui selezioneremo l’elemento tbody dell’elemento table con id="test" per aggiungere una riga dopo di esso.

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

Dopo aver eseguito il seguente script, il nuovo HTML sarà simile al seguente.

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

Questo metodo di aggiunta di una riga in jQuery può essere ottenuto utilizzando il metodo appendto() e prependto().

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

Usa l’inserimento esterno del DOM per inserire la riga della tabella in jQuery

jQuery viene fornito con i metodi .after() e .before() per inserire un elemento rispettivamente dopo e prima dell’elemento specificato. Possiamo usare questi metodi per essere precisi aggiungendo una riga di tabella in varie posizioni di tabella.

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

Aggiungi riga di tabella utilizzando JavaScript

In alternativa, ha anche un modo JavaScript nativo per aggiungere una riga alla tabella utilizzando la funzione 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>