From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- .../api/htmltablerowelement/insertcell/index.md | 103 +++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 files/fr/web/api/htmltablerowelement/insertcell/index.md (limited to 'files/fr/web/api/htmltablerowelement/insertcell/index.md') diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md new file mode 100644 index 0000000000..7b4ebb53b1 --- /dev/null +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md @@ -0,0 +1,103 @@ +--- +title: HTMLTableRowElement.insertCell() +slug: Web/API/HTMLTableRowElement/insertCell +translation_of: Web/API/HTMLTableRowElement/insertCell +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode HTMLTableRowElement.insertCell() insère une nouvelle cellule ({{HtmlElement("td")}}) dans une ligne de tableau ({{HtmlElement("tr")}}) et renvoie une référence sur cette cellule.

+ +
+

Note : insertCell() insère la cellule directement dans la ligne. La cellule n’a pas besoin d’être ajoutée séparément comme cela serait le cas si {{domxref("Document.createElement()")}} avait été utilisé pour créer le nouvel élément <td>.

+
+ +

Syntaxe

+ +
var newCell = HTMLTableRowElement.insertCell(index);
+
+ +

{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.

+ +

Paramètres

+ +
+
index {{optional_inline}}
+
index est l’index de cellule de la nouvelle cellule. Si index est -1 ou égal au nombre actuel de cellules, la nouvelle cellule est ajoutée à la fin la ligne. Si index est supérieur au nombre de cellules, une exception IndexSizeError sera levée. Si index est omis, la valeur sera -1 par défaut.
+
+ +

Valeur de retour

+ +

newCell est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.

+ +

Exemple

+ +

Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.

+ +

Nous utilisons ensuite insertCell(0) pour insérer une nouvelle cellule dans la nouvelle ligne (pour être du HTML valide, un <tr> doit avoir au moins un élément <td>). Enfin, nous ajoutons du texte à la cellule en utilisant {{domxref("Document.createTextNode()")}} et {{domxref("Node.appendChild()")}}.

+ +

HTML

+ +
<table id="my-table">
+  <tr><td>Row 1</td></tr>
+  <tr><td>Row 2</td></tr>
+  <tr><td>Row 3</td></tr>
+</table>
+ +

JavaScript

+ +
function addRow(tableID) {
+  // Obtient une référence sur la table
+  let tableRef = document.getElementById(tableID);
+
+  // Insère une ligne à la fin de la table
+  let newRow = tableRef.insertRow(-1);
+
+  // Insère une cellule dans la ligne à l’index 0
+  let newCell = newRow.insertCell(0);
+
+  // Ajoute un nœud texte à la cellule
+  let newText = document.createTextNode('New bottom row');
+  newCell.appendChild(newText);
+}
+
+// Appelle addRow() avec l’ID de la table
+addRow('my-table');
+ +

Résultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}}{{Spec2("DOM2 HTML")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLTableRowElement.insertCell")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf