Comment ajouter une ligne de tableau dans jQuery

1. append() / prepend() pour ajouter une rangée de table dans jQuery
2. Ajouter une ligne de tableau en utilisant JavaScript

Dans le langage HTML actuel, les éléments de table comportent divers éléments internes comme tbody, thead, tfoot pour contenir des lignes de données.

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

Il en résulte la nécessité d’être précis lors de l’insertion de la ligne de table dans le DOM. jQuery est livré avec deux méthodes d’insertion à l’intérieur et à l’extérieur du DOM pour ajouter un élément.

append() / prepend() pour ajouter une rangée de table dans jQuery

Pour ajouter une ligne dans le corps de la table en utilisant jQuery, nous pouvons utiliser le DOM à l’intérieur des méthodes d’insertion de append() ou prepend() qui ajoute un élément au début ou à la fin de l’élément suggéré. Ici, nous sélectionnerons l’élément tbody de table avec id="test" pour ajouter une ligne après lui.

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

Après l’exécution du script suivant, le nouveau HTML ressemblera à ce qui suit.

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

Cette méthode d’ajout d’une ligne dans jQuery peut être réalisée en utilisant les méthodes appendto() et prependto().

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

Utilisation de l’insertion de DOM externe pour insérer une ligne de table dans jQuery

jQuery est livré avec les méthodes .after() et .before() pour insérer un élément avant et après l’élément spécifié respectivement. Nous pouvons utiliser ces méthodes pour être précis en ajoutant une rangée de table dans différentes positions de la table.

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

Ajouter une ligne de tableau en utilisant JavaScript

Alternativement, il dispose également d’une méthode JavaScript native pour ajouter une ligne au tableau en utilisant la fonction 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>