diff options
Diffstat (limited to 'files/de/web/api/htmltableelement/insertrow/index.html')
| -rw-r--r-- | files/de/web/api/htmltableelement/insertrow/index.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/files/de/web/api/htmltableelement/insertrow/index.html b/files/de/web/api/htmltableelement/insertrow/index.html new file mode 100644 index 0000000000..869d185b98 --- /dev/null +++ b/files/de/web/api/htmltableelement/insertrow/index.html @@ -0,0 +1,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> |