Méthode insertRow() du tableau

Objet Table DOM HTML

Définition et utilisation

insertRow() La méthode crée un élément <tr> et l'ajoute au tableau.

insertRow() La méthode insère une nouvelle ligne à l'indice spécifié dans le tableau.

Attention :L'élément <tr> doit contenir des éléments <th> ou <td>.

Astuce :Utilisez Méthode deleteRow() Supprimer une ligne.

Voir également :

Manuel HTML :Balise <tr> HTML

Exemple

Exemple 1

Insérez une nouvelle ligne à la première position du tableau (et insérez des éléments <td> contenant du texte) :

// Trouvez l'élément <table> avec l'id="myTable" :
var table = document.getElementById("myTable");
// Créez un élément <tr> vide et ajoutez-le à la première position du tableau :
var row = table.insertRow(0);
// Insérez de nouvelles cellules (éléments <td>) à la première et deuxième position de l'élément <tr> "nouveau" :
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// Ajoutez du texte dans les nouvelles cellules :
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

Essayez-le vous-même

Exemple 2

Création et suppression de lignes :

function myCreateFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}
function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(0);
}

Essayez-le vous-même

Syntaxe

tableObject.insertRow(index)
Paramètre Description
index

Obligatoire dans Firefox et Opera, optionnel dans IE, Chrome et Safari.

Nombre, déterminant la position de la ligne à insérer (commençant à 0). La valeur 0 entraîne l'insertion de la nouvelle ligne à la première position.

Il est également possible d'utiliser la valeur -1, ce qui entraînera l'insertion d'une nouvelle ligne à la dernière position.

Si ce paramètre est omis, insertRow() insère une nouvelle ligne à la dernière position dans Chrome, IE, Firefox et Opera, et à la première position dans Safari.

Détails techniques

Valeur de retour : Élément <tr> inséré.

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Objet Table DOM HTML