aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/htmltablerowelement
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/htmltablerowelement
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/fr/web/api/htmltablerowelement')
-rw-r--r--files/fr/web/api/htmltablerowelement/index.html99
-rw-r--r--files/fr/web/api/htmltablerowelement/insertcell/index.html105
2 files changed, 204 insertions, 0 deletions
diff --git a/files/fr/web/api/htmltablerowelement/index.html b/files/fr/web/api/htmltablerowelement/index.html
new file mode 100644
index 0000000000..323cd60902
--- /dev/null
+++ b/files/fr/web/api/htmltablerowelement/index.html
@@ -0,0 +1,99 @@
+---
+title: HTMLTableRowElement
+slug: Web/API/HTMLTableRowElement
+tags:
+ - API
+ - HTML DOM
+ - Interface
+ - Reference
+ - TopicStub
+translation_of: Web/API/HTMLTableRowElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>L'interface <strong><code>HTMLTableRowElement</code></strong> fournit des propriétés et des méthodes spéciales (au-delà de l'interface {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler la mise en page et la présentation des lignes dans un tableau HTML.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTableRowElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant une valeur énumérée reflétant l'attribut {{htmlattrxref("align", "tr")}}. Il indique l'alignement du contenu de l'élément par rapport au contexte environnant. Les valeurs possibles sont <code>"left"</code>, <code>"right"</code>, et <code>"center"</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant la couleur de fond des cellules. Il reflète l'attribut obsolète {{htmlattrxref("bgColor", "tr")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableRowElement.cells")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une {{domxref("HTMLCollection")}} en direct contenant les cellules de la ligne. La <code>HTMLCollection</code> est active et est automatiquement mise à jour lorsque des cellules sont ajoutées ou supprimées.</dd>
+ <dt>{{domxref("HTMLTableRowElement.ch")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant un seul caractère. Ce caractère est celui sur lequel aligner toutes les cellules d'une colonne. Il reflète {{htmlattrxref("char", "tr")}} et par défaut les points décimaux associés à la langue, par exemple <code>'.'</code> pour l'anglais, ou <code>','</code> pour le français. Cette propriété était facultative et n'était pas très bien prise en charge.</dd>
+ <dt>{{domxref("HTMLTableRowElement.chOff")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant un entier indiquant combien de caractère doivent être laissés à droite (pour les scripts de gauche à droite; ou à gauche pour les scripts de droite à gauche) du caractère défini par <code>HTMLTableRowElement.ch</code>. Cette propriété était facultative et n'était pas très bien prise en charge.</dd>
+ <dt>{{domxref("HTMLTableRowElement.rowIndex")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une valeur <code>long</code> qui donne la position logique de la ligne dans la table entière. Si la ligne ne fait pas partie d'une table, renvoie <code>-1</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.sectionRowIndex")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une valeur <code>long</code> qui donne la position logique de la ligne dans la section de table à laquelle elle appartient. Si la ligne ne fait pas partie d'une section, renvoie <code>-1</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.vAlign")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} représentant une valeur énumérée indiquant comment le contenu de la cellule doit être aligné verticalement. Il reflète l'attribut {{htmlattrxref("valign", "tr")}} et peut avoir l'une des valeurs suivantes : <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, ou <code>"baseline"</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("HTMLTableRowElement.deleteCell()")}}</dt>
+ <dd>Supprime la cellule à la position donnée dans la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à <code>0</code>, elle déclenche une {{domxref("DOMException")}} avec la valeur <code>IndexSizeError</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.insertCell()")}}</dt>
+ <dd>Insère une nouvelle cellule juste avant la position donnée dans la ligne. Si la position donnée n'est pas donnée ou est <code>-1</code>, elle ajoute la cellule à la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à <code>-1</code>, elle déclenche une {{domxref("DOMException")}} avec la valeur <code>IndexSizeError</code>. Renvoie une référence à un <a href="/en-US/docs/Web/API/HTMLTableCellElement">HTMLTableCellElement [en-US]</a>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Spécification</th>
+ <th scope="col">Statut</th>
+ <th scope="col">Commantaire</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "#htmltablerowelement", "HTMLTableRowElement")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-tr-element", "HTMLTableRowElement")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Le paramètre de <code>insertCell</code> est désormais facultatif et vaut par défaut <code>-1</code>.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM2 HTML', 'html.html#ID-6986576', 'HTMLTableRowElement')}}</td>
+ <td>{{Spec2('DOM2 HTML')}}</td>
+ <td>Les propriétés <code>cells</code>, <code>rowIndex</code>, et <code>selectionRowIndex</code> sont désormais en lecture seule.<br>
+ Les méthodes <code>insertCell</code> et <code>deleteCell</code> peuvent déclencher des exceptions.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM1', 'level-one-html.html#ID-6986576', 'HTMLTableRowElement')}}</td>
+ <td>{{Spec2('DOM1')}}</td>
+ <td>Défintion initiale.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</div>
+
+<p>{{Compat("api.HTMLTableRowElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML implémentant cette interface : {{HTMLElement("tr")}}.</li>
+</ul>
+
+<dl>
+ <dt></dt>
+</dl>
diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.html b/files/fr/web/api/htmltablerowelement/insertcell/index.html
new file mode 100644
index 0000000000..e4c064e2cc
--- /dev/null
+++ b/files/fr/web/api/htmltablerowelement/insertcell/index.html
@@ -0,0 +1,105 @@
+---
+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="blockIndicator 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>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<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>