files/fr/web/api/htmltablerowelement/insertcell/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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>