Ajouter efficacement des lignes de tableau avec jQuery et JavaScript

L’ajout dynamique de lignes aux tables HTML est une exigence fréquente en développement web, particulièrement lors de la création d’interfaces utilisateur interactives. Ce tutoriel présente des méthodes efficaces pour y parvenir à l’aide de jQuery et de JavaScript pur, vous permettant de choisir l’approche la mieux adaptée à votre projet.

Table des matières

• Ajout de lignes de tableau avec append() et prepend() de jQuery
• Ajout de lignes de tableau avec JavaScript pur

Ajout de lignes de tableau avec append() et prepend() de jQuery

jQuery offre un moyen concis et efficace de manipuler le DOM. Ses méthodes append() et prepend() s’intègrent parfaitement aux structures de tableau.

Considérons un exemple de tableau HTML :

<table id="myTable">
  <thead>
    <tr>
      <th>Nom</th>
      <th>Âge</th>
    <tr>
  </thead>
  <tbody>
    <!-- Les lignes seront ajoutées ici -->
  </tbody>
</table>

Pour ajouter une nouvelle ligne avec jQuery :

// Obtenir le corps du tableau
let $tableBody = $('#myTable tbody');

// Créer la nouvelle ligne
let $newRow = $('<tr>');

// Créer et ajouter les cellules
$newRow.append('<td>Nouveau Nom</td>');
$newRow.append('<td>30</td>');

// Ajouter la ligne au corps du tableau
$tableBody.append($newRow); 

Cet extrait de code sélectionne le corps du tableau, crée un nouvel élément de ligne, ajoute des cellules de données et ajoute la ligne complète au tableau. Pour préfixer (ajouter au début), utilisez simplement $tableBody.prepend($newRow);.

Pour des scénarios plus complexes ou l’ajout de plusieurs lignes, la création directe de la chaîne HTML de la ligne peut être plus efficace :

let newRowHTML = `<tr><td>Un autre Nom</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);

N’oubliez pas de désinfecter les données fournies par l’utilisateur pour éviter les vulnérabilités XSS.

Ajout de lignes de tableau avec JavaScript pur

Comprendre l’approche JavaScript native fournit une compréhension plus approfondie de la manipulation du DOM. Bien que plus verbeux, il évite les dépendances externes.

let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');

nameCell.textContent = 'Encore un autre Nom';
ageCell.textContent = '40';

newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);

Ce code manipule directement le DOM à l’aide de méthodes JavaScript standard. Choisissez la méthode qui convient le mieux aux besoins de votre projet et à votre niveau de confort avec jQuery. N’oubliez pas d’inclure la bibliothèque jQuery si vous utilisez les exemples jQuery : <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>