-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
136 lines (101 loc) · 3.09 KB
/
index.md
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
---
title: "HTMLTableSectionElement: insertRow() method"
short-title: insertRow()
slug: Web/API/HTMLTableSectionElement/insertRow
page-type: web-api-instance-method
browser-compat: api.HTMLTableSectionElement.insertRow
---
{{APIRef("HTML DOM")}}
The **`insertRow()`** method of the {{domxref("HTMLTableSectionElement")}} interface inserts a new row
({{HtmlElement("tr")}}) in the given table sectioning element ({{HTMLElement("thead")}}, {{HTMLElement("tfoot")}}, or
{{HTMLElement("tbody")}}), then returns a reference to this new row.
> **Note:** `insertRow()` inserts the row directly into the
> section. The row does not need to be appended separately as would be the case if
> {{domxref("Document.createElement()")}} had been used to create the new
> `<tr>` element.
## Syntax
```js-nolint
insertRow()
insertRow(index)
```
### Parameters
- `index` {{optional_inline}}
- : The row index of the new row. If `index` is `-1` or equal to
the number of rows, the row is appended as the last row.
If `index` is omitted it defaults to `-1`.
### Return value
An {{domxref("HTMLTableRowElement")}} that references the new row.
### Exceptions
- `IndexSizeError` {{domxref("DOMException")}}
- : Thrown if `index` is greater than the number of rows, or smaller than `-1`.
## Examples
In this example, two buttons allow you to add and remove rows from the table body section; it also updates a {{HTMLElement("output")}} element with the number of rows currently in the table.
### HTML
```html
<table>
<thead>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</tbody>
</table>
<button id="add">Add a row</button>
<button id="remove">Remove last row</button>
<div>This table's body has <output>1</output> row(s).</div>
```
```css hidden
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
button {
margin: 1em 1em 1em 0;
}
```
### JavaScript
```js
// Obtain relevant interface elements
const bodySection = document.querySelectorAll("tbody")[0];
const rows = bodySection.rows; // The collection is live, therefore always up-to-date
const rowNumberDisplay = document.querySelectorAll("output")[0];
const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");
function updateRowNumber() {
rowNumberDisplay.textContent = rows.length;
}
addButton.addEventListener("click", () => {
// Add a new row at the end of the body
const newRow = bodySection.insertRow();
// Add cells inside the new row
["A", "B", "C"].forEach(
(elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`),
);
// Update the row counter
updateRowNumber();
});
removeButton.addEventListener("click", () => {
// Delete the row from the body
bodySection.deleteRow(-1);
// Update the row counter
updateRowNumber();
});
```
### Result
{{EmbedLiveSample("Examples", "100%", 175)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref("HTMLTableRowElement.insertCell()")}}
- {{domxref("HTMLTableElement.insertRow()")}}