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
|
---
title: HTMLTableElement.insertRow()
slug: Web/API/HTMLTableElement/insertRow
tags:
- API
- HTML DOM
- HTMLTableElement
- Method
- Reference
translation_of: Web/API/HTMLTableElement/insertRow
---
<div>{{APIRef("HTML DOM")}}</div>
<p>Die Methode <strong><code>HTMLTableElement.insertRow()</code></strong> fügt einer vorhandenen {{HtmlElement("table")}} eine neue Zeile ({{HtmlElement("tr")}}) hinzu und gibt eine Referenz auf die neue Zeile zurück.</p>
<p>Wenn eine Tabelle mehrere {{HtmlElement("tbody")}} Elemente besitzt, wird die neue Zeile standardmäßig dem letzten <code><tbody></code> hinzugefügt. Um sie einem bestimmten <code><tbody></code> Element hinzuzufügen, beschaffen Sie sich eine Referenz auf das gewünschte <code><tbody></code> Element und rufen Sie <code>insertRow()</code> auf diesem Element auf:</p>
<pre class="brush: js notranslate">let bestimmter_tbody = document.getElementById(tbody_id);
let zeile = bestimmter_tbody.insertRow(index)</pre>
<div class="blockIndicator note">
<p><strong>Anmerkung:</strong> <code>insertRow()</code> fügt die Zeile direkt in die Tabelle ein. Die Zeile muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <code><tr></code> Element mittels <a href="https://wiki.developer.mozilla.org/de/docs/Web/API/Document/createElement"><code>Document.createElement()</code></a> erzeugt hätte.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox notranslate">var <em>neueZeile</em> = <em>HTMLTableElement</em>.insertRow(<em>index</em>);</pre>
<p>{{domxref("HTMLTableElement")}} ist eine Referenz auf ein HTML {{HtmlElement("table")}} Element.</p>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>index</code> {{optional_inline}}</dt>
<dd>Der Zeilenindex der neuen Zeile. Ist der Index <code>-1</code> or gleich der Anzahl der vorhandenen Zeilen, wird die Zeile als letzte Zeile angefügt. Wenn <code>index</code> größer als die Anzahl vorhandener Zeilen ist, führt dies zi einer <code>IndexSizeError</code> Exception. Wird <code>index</code> weggelassen, ist der Standardwert <code>-1</code>.</dd>
</dl>
<h3 id="Rückgabewert">Rückgabewert</h3>
<p><code>neueZeile</code> ist ein {{domxref("HTMLTableRowElement")}}, das die neue Zeile referenziert.</p>
<h2 id="Beispiel">Beispiel</h2>
<p>Dieses Beispiel verwendet <code>insertRow(-1)</code>, um an eine Tabelle eine neue Zeile anzufügen.</p>
<p>Wir verwenden daraufhin {{domxref("HTMLTableRowElement.insertCell()")}}, um der neuen Zeile noch eine Zelle hinzufügen. (Um gültiges HTML zu sein, muss ein <code><tr></code> mindestens ein <code><td></code> Element enthalten.) Schließlich fügen wir der Zelle mittels {{domxref("Document.createTextNode()")}} und {{domxref("Node.appendChild()")}} Text hinzu.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><table id="my-table">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table></pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js notranslate">function addRow(tableID) {
// Beschaffe eine Referenz auf die Tabelle
let tableRef = document.getElementById(tableID);
// Füge am Ende der Tabelle eine neue Zeile an
let newRow = tableRef.insertRow(-1);
// Erstelle in der Zeile eine Zelle am Index 0
let newCell = newRow.insertCell(0);
// Füge der Zelle einen textnode hinzu
let newText = document.createTextNode('Neue letzte Zeile');
newCell.appendChild(newText);
}
// Rufe addRow() mit der ID der Tabelle auf
addRow('my-table');</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("Beispiel")}}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</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>Spezifiziert genauer, wo die Zeile eingefügt wird.</td>
</tr>
<tr>
<td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
<td>{{Spec2("DOM1")}}</td>
<td>Initiale Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<p>{{Compat("api.HTMLTableElement.insertRow")}}</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
<li>Das HTML Element, das Zeilen repräsentiert: {{domxref("HTMLTableRowElement")}}</li>
</ul>
|
