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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
---
title: table.insertRow
slug: Web/API/HTMLTableElement/insertRow
tags:
- API
- DOM HTML
- HTMLTableElement
- Méthode
- NeedsMobileBrowserCompatibility
- Reference
translation_of: Web/API/HTMLTableElement/insertRow
---
<div>
<p>{{APIRef("HTML DOM")}}</p>
<p>La méthode <strong><code>HTMLTableElement.insertRow()</code></strong> insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.</p>
</div>
<h2 id="Syntax" name="Syntax">Syntaxe</h2>
<pre class="syntaxbox">var <em>ligne</em> = <em>HTMLTableElement</em>.insertRow(<em>optionnel indice = -1</em>);</pre>
<ul>
<li><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement"><code>HTMLTableElement</code></a> est une référence à un élément table HTML.</li>
<li><code>indice</code> est l'indice de ligne de la nouvelle ligne.</li>
<li><code>ligne</code> reçoit la référence à la nouvelle ligne. Une référence à un <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>. Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si <code>indice</code> est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa valeur sera -1 par défaut.</li>
<li>Si une table a plusieurs éléments <code>tbody</code>, par défaut, la nouvelle ligne est ajoutée dans le dernier <code>tbody</code>. Pour insérer la ligne dans un <code>tbody</code> particulier :<br>
<code>var <em>tbody_particulier</em></code><code>=document.getElementById(<em>id_tbody</em>);<br>
var <em>ligne</em>=tbody_particulier.</code><code>insertRow(<em>indice</em>)</code></li>
</ul>
<h2 id="Example" name="Example">Exemple</h2>
<pre class="brush:html"><table id="TableA">
<tr>
<td>Ancienne ligne supérieure</td>
</tr>
</table>
<script type="text/javascript">
function ajouteLigne(tableID) {
// Récupération d'une référence à la table
var refTable = document.getElementById(tableID);
// Insère une ligne dans la table à l'indice de ligne 0
var nouvelleLigne = refTable.insertRow(0);
// Insère une cellule dans la ligne à l'indice 0
var nouvelleCellule = nouvelleLigne.insertCell(0);
// Ajoute un nœud texte à la cellule
var nouveauTexte = document.createTextNode('Nouvelle ligne supérieure')
nouvelleCellule.appendChild(nouveauTexte);
}
// Appelle ajouteLigne() avec l'ID d'une table
ajouteLigne('TableA');
</script></pre>
<p>Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD.</p>
<p>Remarquez que <code>insertRow</code> insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si <code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement()</a></code> avait été utilisé pour créer un nouvel élement TR.</p>
<h2 id="Spécifications">Spécifications</h2>
<table>
<tbody>
<tr>
<th>Spécification</th>
<th>Statut</th>
<th>Commentaire</th>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
<td>{{Spec2("DOM2 HTML")}}</td>
<td>Spécifie plus en détail où la ligne est insérée.</td>
</tr>
<tr>
<td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
<td>{{Spec2("DOM1")}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p> </p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div>
<p>{{CompatibilityTable}}</p>
<table>
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Support de base</td>
<td>4</td>
<td>{{CompatVersionUnknown}}</td>
<td>3<sup>[1]</sup></td>
<td>5.5</td>
<td>10</td>
<td>4</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Support de base</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
<p>[1] A partir de Gecko 20.0 {{geckoRelease("20.0")}}, l'argument indice a été rendu optionnel et a -1 comme valeur par défaut d'après la spécification HTML.</p>
</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
</ul>
|
