Créer un tableau à l'aide de JavaScript

1. Diverses balises utilisées pour créer un tableau en HTML
2. Créer un tableau à l’aide de JavaScript

Le langage de programmation JavaScript nous permet de créer et de manipuler des éléments DOM (Document Object Model). Cela nous donne beaucoup plus de flexibilité et permet à tout le monde de travailler beaucoup plus facilement avec DOM, surtout si vous êtes un développeur backend.

Il existe deux manières d’ajouter des éléments HTML tels que des tableaux à un document HTML, la première consiste à ajouter la balise de tableau HTML directement dans notre page Web HTML, et la seconde consiste à créer le tableau entier dans notre code JavaScript. La deuxième option est la manière la plus courante de créer et d’ajouter la table au DOM.

Mais avant d’approfondir la façon dont la table est créée avec JavaScript, commençons par comprendre visuellement les différentes balises de table utilisées pour créer une table et ce que chacune de ces balises signifie exactement. Cela vous donnera une représentation visuelle du tableau, ce qui vous permettra de comprendre plus facilement la partie code plus loin dans cet article.

Diverses balises utilisées pour créer un tableau en HTML

Vous trouverez ci-dessous la liste des balises utilisées pour créer un tableau en HTML.

1. table : La balise HTML table représente l’ensemble du tableau en HTML. Il s’agit de la balise de départ du tableau à l’intérieur de laquelle toutes les autres balises liées au tableau (comme thead, tr, td, etc.) seront utilisées en fonction de la façon dont vous souhaitez structurer le tableau.
2. thead : le thead signifie en-tête de table. Cette balise est utilisée pour ajouter un titre aux tableaux. Il représente généralement la première ligne du tableau. Pour ajouter des données à l’intérieur de la balise thead, nous utilisons la balise th. Si vous ne souhaitez pas ajouter de rubrique à vos tableaux, vous pouvez ignorer la balise thead.
3. tbody : Le tbody signifie corps de table. Cette balise représente le corps entier ou le contenu du tableau.
4. tfoot : Le tfoot signifie pied de table. Il représente généralement la dernière ligne du tableau. Cette balise est facultative. Nous n’utilisons pas cette balise si souvent.
5. tr: Le tr correspond à la ligne du tableau. Cela représente la ligne entière du tableau. Pour insérer des données dans le tableau soit à l’intérieur de l’en-tête, du corps ou du pied de page du tableau, nous devons d’abord créer une ligne, puis à l’intérieur de cette ligne, nous pouvons insérer les données à l’aide de la balise td.
6. th : Le th n’est utilisé qu’à l’intérieur de la balise thead. Il représente la cellule unique de la ligne d’en-tête. Il rend les en-têtes du tableau en gras.
7. td : le td correspond aux données de la table. Il représente la seule cellule du tableau. C’est similaire à th, mais la seule différence est que th n’est utilisé qu’à l’intérieur de la balise thead, et td est utilisé ailleurs. La balise td peut être utilisée avec les balises tbody et tfoot.

Si vous combinez toutes ces balises sous forme imbriquée, c’est-à-dire les unes dans les autres, voici à quoi ressemblera la table après sa création.

La bordure rouge représente l’ensemble du tableau. À l’intérieur, nous avons 3 balises, l’en-tête du tableau (thead), le corps du tableau (tbody) et le pied de tableau (tfoot), qui sont représentés avec la bordure verte. Pour insérer des données à l’intérieur de ces trois balises, nous devons d’abord créer une ligne à l’aide de la balise tr. Cette ligne est représentée avec la bordure jaune. Et puis, pour insérer des données dans l’en-tête du tableau, nous utilisons la balise th, et pour insérer des données dans le corps du tableau ou le pied de page, nous utilisons les balises td. Il est affiché à l’aide de la couleur grise.

Créer un tableau à l’aide de JavaScript

Pour créer un élément HTML à l’aide de JavaScript, nous devons utiliser une méthode appelée document.createElement() qui prend le nom de la balise qui est une chaîne comme paramètre. Par exemple, nous voulons créer une table, nous allons donc passer la chaîne table en entrée de la méthode createElement() document.createElement('table').

Créons maintenant le tableau ci-dessous entièrement en JavaScript.

Le tableau ci-dessus comporte 4 lignes. La première ligne contient tout l’en-tête et les trois lignes suivantes contiennent les données.

Ci-dessous, nous avons le code HTML, CSS et JS. A l’intérieur de notre balise body, nous n’avons au départ rien. Nous allons créer notre tableau à l’intérieur du JavaScript, et à la fin, nous ajouterons le tableau entier à la balise body afin qu’il soit visible sur la page Web. À l’intérieur de la balise style, nous avons donné un style de base à notre table.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        th, td{
            padding: 10px 20px;
            border: 1px solid #000;
        }
    </style>

</head>
<body id="body">

    <script src="script.js"></script>  
</body>
</html>

Pour créer une table, nous allons d’abord créer la balise table. Ensuite, nous allons stocker cette balise dans une variable table afin de pouvoir l’utiliser plus tard. De la même manière, nous allons également créer des balises thead et tbody et les stocker à l’intérieur des variables. Ensuite, nous ajoutons thead et tbody à la balise table.

let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

table.appendChild(thead);
table.appendChild(tbody);

// Adding the entire table to the body tag
document.getElementById('body').appendChild(table);

Vous devez ajouter ou ajouter cette table que vous avez créée en JavaScript à la balise body. Nous devons d’abord obtenir la balise HTML body en utilisant son id, puis nous ajouterons la table en utilisant ce qu’on appelle la méthode appendChild(). Puisque nous avons déjà stocké notre table à l’intérieur de la variable table, nous n’aurons qu’à ajouter la table que nous avons créée en tant qu’enfant à cet élément du corps.

À ce stade, voici à quoi ressemble la structure de notre table.

Pour ajouter des lignes et des données à notre table, nous allons créer des balises de lignes de table (tr), d’en-tête de table (th) et de données de table (td) à l’aide de la méthode createElement(), puis nous allons ajoutez les données à l’intérieur de ces éléments à l’aide de la propriété innerHTML.

// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = 'Sr. No.';
let heading_2 = document.createElement('th');
heading_2.innerHTML = 'Name';
let heading_3 = document.createElement('th');
heading_3.innerHTML = 'Company';

row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
thead.appendChild(row_1);


// Creating and adding data to second row of the table
let row_2 = document.createElement('tr');
let row_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = '1.';
let row_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML = 'James Clerk';
let row_2_data_3 = document.createElement('td');
row_2_data_3.innerHTML = 'Netflix';

row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
row_2.appendChild(row_2_data_3);
tbody.appendChild(row_2);


// Creating and adding data to third row of the table
let row_3 = document.createElement('tr');
let row_3_data_1 = document.createElement('td');
row_3_data_1.innerHTML = '2.';
let row_3_data_2 = document.createElement('td');
row_3_data_2.innerHTML = 'Adam White';
let row_3_data_3 = document.createElement('td');
row_3_data_3.innerHTML = 'Microsoft';

row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
row_3.appendChild(row_3_data_3);
tbody.appendChild(row_3);

Après avoir inséré les données à l’aide de la propriété innerHTML, nous ajouterons ces données à leurs lignes respectives. Par exemple, tout d’abord, nous ajoutons les rubriques (c’est-à-dire heading_1,heading_2,heading_3) à row_1. Et puis nous ajoutons notre première ligne, c’est-à-dire row_1, à la balise thead en tant qu’enfant.

De même, nous créons 2 autres lignes, c’est-à-dire row_2 et row_3, puis nous ajoutons les variables (row_2_data_1, row_2_data_2, row_2_data_3) et (row_3_data_1, row_3_data_2, row_3_data_3) respectivement à ces 2 rangées. Et à la fin, nous ajoutons ces 2 lignes à la balise tbody car c’est pour les enfants.

Voici à quoi ressemblent le tableau et sa structure HTML dans la console du développeur.

À gauche, nous avons le tableau et à droite, nous avons le code généré par le navigateur. Vous pouvez personnaliser le code js en fonction de l’apparence que vous souhaitez donner à la table. Nous n’avons utilisé que 3 méthodes JavaScript (createElement(), innerHTML, appendChild()) pour y parvenir.