diff options
author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:14 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
commit | c05efa8d7ae464235cf83d7c0956e42dc6974103 (patch) | |
tree | 6ea911b2f2010f63a026de6bb7a1a51e7690a7e1 /files/fr/web/api/htmltablerowelement/insertcell/index.md | |
parent | 13a5e017558b248ee1647d4a5825f183b51f09ad (diff) | |
download | translated-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.md | 103 |
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><td></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><tr></code> doit avoir au moins un élément <code><td></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"><table id="my-table"> + <tr><td>Row 1</td></tr> + <tr><td>Row 2</td></tr> + <tr><td>Row 3</td></tr> +</table></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> |