diff options
Diffstat (limited to 'files/fr/web/api/htmltablerowelement/insertcell/index.md')
| -rw-r--r-- | files/fr/web/api/htmltablerowelement/insertcell/index.md | 106 |
1 files changed, 43 insertions, 63 deletions
diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md index 7b4ebb53b1..38ce65bf91 100644 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.md +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md @@ -3,49 +3,47 @@ title: HTMLTableRowElement.insertCell() slug: Web/API/HTMLTableRowElement/insertCell translation_of: Web/API/HTMLTableRowElement/insertCell --- -<div>{{APIRef("HTML DOM")}}</div> +{{APIRef("HTML DOM")}} -<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> +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. -<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> +> **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>`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>newCell</var> = <var>HTMLTableRowElement</var>.insertCell(<var>index</var>); -</pre> + var newCell = HTMLTableRowElement.insertCell(index); -<p>{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.</p> +{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}. -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `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. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p><code>newCell</code> est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.</p> +`newCell` est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.</p> +Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table. -<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> +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()")}}. -<h3 id="HTML">HTML</h3> +### HTML -<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> +```html +<table id="my-table"> + <tr><td>Row 1</td></tr> + <tr><td>Row 2</td></tr> + <tr><td>Row 3</td></tr> +</table> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">function addRow(tableID) { +```js +function addRow(tableID) { // Obtient une référence sur la table let tableRef = document.getElementById(tableID); @@ -61,43 +59,25 @@ translation_of: Web/API/HTMLTableRowElement/insertCell } // 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> +addRow('my-table'); +``` + +### Résultat + +{{EmbedLiveSample("Example")}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{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. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.HTMLTableRowElement.insertCell")}}</p> +{{Compat("api.HTMLTableRowElement.insertCell")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("HTMLTableElement.insertRow()")}}</li> - <li>L’élément HTML représentant les cellules : {{domxref("HTMLTableCellElement")}}</li> -</ul> +- {{domxref("HTMLTableElement.insertRow()")}} +- L’élément HTML représentant les cellules : {{domxref("HTMLTableCellElement")}} |