blob: 015f1e77b58e2c24aa783874cb626c5437c78c75 (
plain)
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
|
---
title: HTMLTableRowElement.insertCell()
slug: Web/API/HTMLTableRowElement/insertCell
translation_of: Web/API/HTMLTableRowElement/insertCell
---
{{APIRef("HTML DOM")}}
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.
> **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>`.
## Syntaxe
var newCell = HTMLTableRowElement.insertCell(index);
{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.
### Paramètres
- `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.
### Valeur de retour
`newCell` est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.
## Exemple
Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.
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()")}}.
### HTML
```html
<table id="my-table">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
```
### JavaScript
```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');
```
### Résultat
{{EmbedLiveSample("Exemple")}}
## 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. |
## Compatibilité des navigateurs
{{Compat("api.HTMLTableRowElement.insertCell")}}
## Voir aussi
- {{domxref("HTMLTableElement.insertRow()")}}
- L’élément HTML représentant les cellules : {{domxref("HTMLTableCellElement")}}
|
