Comment ajouter une ligne à la table HTML à l'aide de JavaScript

Parfois, tout en développant un site Web, il peut y avoir une exigence pour créer ou supprimer des lignes et des cellules ou ajouter des données dans un tableau à l'aide de JavaScript. JavaScript est un langage dynamique qui aide à contrôler dynamiquement, à accéder et à modifier les composants HTML du côté client. Plus précisément, il peut être utilisé pour ajouter une ligne à une table HTML.

Ce manuel utilisera JavaScript pour expliquer la procédure pour ajouter une ligne à une table.

Comment ajouter une ligne à la table HTML à l'aide de JavaScript?

Pour ajouter une ligne dans un tableau, utilisez les procédures suivantes:

• Méthode insertrow ()
• Créer un nouvel élément

Vérifions chaque procédure individuellement.

Méthode 1: Ajouter une ligne à la table HTML à l'aide de la méthode insertrow ()

Le "insertrow ()«La méthode est utilisée pour ajouter une nouvelle ligne au début du tableau. Il crée un nouveau élément et l'inserte dans la table. Il faut un index en tant que paramètre qui définit l'emplacement du tableau où une ligne sera ajoutée. Si "0”Ou aucun index ne sera passé dans une méthode, cette méthode ajoute la ligne au début du tableau.

Si vous avez l'intention d'ajouter la ligne au dernier / fin du tableau, passez l'index "-1"Comme argument.

Syntaxe

Utilisez la syntaxe suivante pour ajouter des lignes dans une table à l'aide de la méthode insertrow ():

tableau.insertrow (index);

Ici, "indice"Indique la position où vous souhaitez ajouter une nouvelle ligne, comme à la fin du tableau ou au début.

Exemple 1: Ajout d'une ligne en haut / début de la table

Ici, nous allons créer une table et un bouton dans un fichier HTML à l'aide du HTML

et Mots clés. Le tableau contient trois rangées et trois colonnes ou cellules:

Cellule de la ligne 1	Cellule de la ligne 1	Cellule de la ligne 1
Cellule de la ligne 2	Cellule de la ligne 2	Cellule de la ligne 2
Cellule de la ligne 3	Cellule de la ligne 3	Cellule de la ligne 3

Ensuite, créez un bouton qui invoquera le "ajouter une rangée()”Bouton lorsque vous cliquez:

Cliquez pour ajouter une ligne en haut de la table

Pour styliser la table, nous réglerons la bordure de chaque cellule et la table comme indiqué ci-dessous:

table, td
Border: 1px noir solide;

Maintenant, nous allons ajouter des lignes dans le tableau en haut / début du tableau à l'aide de JavaScript. Pour ce faire, définissez une fonction nommée «ajouter une rangée()"Cela sera appelé sur l'événement onclick () du bouton. Ensuite, récupérez le tableau créé en utilisant le «getElementByid ()" méthode. Après cela, appelez le «insertrow ()«Méthode en passant le«0”Index en tant que paramètre qui indique que la ligne sera ajoutée au début du tableau.

Ensuite, invoquez le «insertCell ()«Méthode en passant des index qui montrent combien de cellules seront ajoutées à la ligne. Enfin, ajoutez les données de texte ou le texte dans les cellules en utilisant «innerhtml" propriété:

functionAdDrow ()
var tableRow = document.getElementById ("table");
Var Row = TableRow.insertrow (0);
var cell1 = ligne.insertCell (0);
var cell2 = ligne.InsertCell (1);
var cell3 = ligne.InsertCell (2);
cellule1.innerhtml = "Cell of New Row";
cellule2.innerhtml = "Cell of New Row";
cellule3.innerhtml = "Cell of New Row";

Comme vous pouvez le voir dans la sortie, la nouvelle ligne est ajoutée en haut de la table existante en cliquant sur le bouton:

Exemple 2: Ajout d'une ligne à la fin du tableau

Si vous souhaitez insérer une ligne au dernier / fin de la table, passez le "-1»Index du«insertrow ()" méthode. Il ajoutera enfin la ligne lorsque le bouton est cliqué:

functionAdDrow ()
var tableRow = document.getElementById ("table");
Var Row = TableRow.insertrow (-1);
var cell1 = ligne.insertCell (0);
var cell2 = ligne.InsertCell (1);
var cell3 = ligne.InsertCell (2);
cellule1.innerhtml = "Cell of New Row";
cellule2.innerhtml = "Cell of New Row";
cellule3.innerhtml = "Cell of New Row";

Sortir

Passons à l'autre méthode!

Méthode 2: Ajouter une ligne à la table HTML en créant un nouvel élément

Il existe une autre méthode pour ajouter une ligne dans un tableau qui crée de nouveaux éléments à l'aide de méthodes JavaScript, y compris le «CreateElement ()"Méthode et le"APPENDCHILD ()" méthode. Le création () crée le et Éléments et la méthode appenchild () ajoute les cellules et les lignes dans un tableau.

Syntaxe

Suivez la syntaxe fournie pour créer un nouvel élément pour ajouter une ligne dans un tableau à l'aide de JavaScript:

document.CreateElement ("tr");

Ici le "tr"Est la rangée de table.

Exemple

Nous allons maintenant utiliser la même table précédemment créée dans HTML avec un fichier CSS, mais dans le fichier JavaScript, nous utiliserons le "CreateElement ()" méthode. Ensuite, ajoutez les données ou le texte dans les cellules en utilisant le «innerhtml" propriété. Enfin, invoquez le «APPENDCHILD ()”Méthode qui ajoutera les cellules dans une ligne puis la ligne dans une table:

functionAdDrow ()
var tableRow = document.getElementById ("table");
var row = document.CreateElement ("tr");
var cell1 = document.CreateElement ("TD");
var cell2 = document.CreateElement ("TD");
var cell3 = document.CreateElement ("TD");
cellule1.innerhtml = "Cell of New Row";
cellule2.innerhtml = "Cell of New Row";
cellule3.innerhtml = "Cell of New Row";
ligne.Annexe (Cell1);
ligne.appenchild (Cell2);
ligne.Annexe (Cell3);
champ de table.APPENDCHILD (ROW);

La sortie montre que la nouvelle ligne est ajoutée avec succès à la fin du tableau:

Nous avons compilé toutes les méthodes pour ajouter une ligne dans un tableau à l'aide de JavaScript.

Conclusion

Pour ajouter une ligne dans un tableau, utilisez les deux approches: Insertrow () ou créez un nouvel élément à l'aide de méthodes prédéfinies JavaScript, y compris la méthode APPEDCHILD () et la méthode CreateElement (). Vous pouvez ajouter une ligne au début de la fin du tableau à l'aide de la méthode insertrow () en passant des index. Ce manuel a expliqué les procédures pour ajouter une nouvelle ligne dans une table en cliquant sur un bouton à l'aide de JavaScript.