aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/htmltablerowelement/insertcell/index.md
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-10-02 17:20:14 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-02 17:30:20 +0200
commitc05efa8d7ae464235cf83d7c0956e42dc6974103 (patch)
tree6ea911b2f2010f63a026de6bb7a1a51e7690a7e1 /files/fr/web/api/htmltablerowelement/insertcell/index.md
parent13a5e017558b248ee1647d4a5825f183b51f09ad (diff)
downloadtranslated-content-c05efa8d7ae464235cf83d7c0956e42dc6974103.tar.gz
translated-content-c05efa8d7ae464235cf83d7c0956e42dc6974103.tar.bz2
translated-content-c05efa8d7ae464235cf83d7c0956e42dc6974103.zip
move *.html to *.md
Diffstat (limited to 'files/fr/web/api/htmltablerowelement/insertcell/index.md')
-rw-r--r--files/fr/web/api/htmltablerowelement/insertcell/index.md103
1 files changed, 103 insertions, 0 deletions
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
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <strong><code>HTMLTableRowElement.insertCell()</code></strong> insère une nouvelle cellule ({{HtmlElement("td")}}) dans une ligne de tableau ({{HtmlElement("tr")}}) et renvoie une référence sur cette cellule.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>insertCell()</code> 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 <code>&lt;td&gt;</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>newCell</var> = <var>HTMLTableRowElement</var>.insertCell(<var>index</var>);
+</pre>
+
+<p>{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>index</code> {{optional_inline}}</dt>
+ <dd><code>index</code> est l’index de cellule de la nouvelle cellule. Si <code>index</code> est <code>-1</code> ou égal au nombre actuel de cellules, la nouvelle cellule est ajoutée à la fin la ligne. Si <code>index</code> est supérieur au nombre de cellules, une exception <code>IndexSizeError</code> sera levée. Si <code>index</code> est omis, la valeur sera <code>-1</code> par défaut.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>newCell</code> est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.</p>
+
+<p>Nous utilisons ensuite <code>insertCell(0)</code> pour insérer une nouvelle cellule dans la nouvelle ligne (pour être du HTML valide, un <code>&lt;tr&gt;</code> doit avoir au moins un élément <code>&lt;td&gt;</code>). Enfin, nous ajoutons du texte à la cellule en utilisant {{domxref("Document.createTextNode()")}} et {{domxref("Node.appendChild()")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table id="my-table"&gt;
+ &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
+ &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
+ &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">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');</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Spécification</th>
+ <th scope="col">Statut</th>
+ <th scope="col">Commentaire</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}}</td>
+ <td>{{Spec2("HTML WHATWG")}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}}</td>
+ <td>{{Spec2("DOM2 HTML")}}</td>
+ <td>Définition initiale.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.HTMLTableRowElement.insertCell")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableElement.insertRow()")}}</li>
+ <li>L’élément HTML représentant les  cellules : {{domxref("HTMLTableCellElement")}}</li>
+</ul>