From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../api/htmltableelement/createcaption/index.html | 75 ++++++++++++ files/de/web/api/htmltableelement/index.html | 132 +++++++++++++++++++++ .../web/api/htmltableelement/insertrow/index.html | 122 +++++++++++++++++++ 3 files changed, 329 insertions(+) create mode 100644 files/de/web/api/htmltableelement/createcaption/index.html create mode 100644 files/de/web/api/htmltableelement/index.html create mode 100644 files/de/web/api/htmltableelement/insertrow/index.html (limited to 'files/de/web/api/htmltableelement') diff --git a/files/de/web/api/htmltableelement/createcaption/index.html b/files/de/web/api/htmltableelement/createcaption/index.html new file mode 100644 index 0000000000..fb27bd6480 --- /dev/null +++ b/files/de/web/api/htmltableelement/createcaption/index.html @@ -0,0 +1,75 @@ +--- +title: HTMLTableElement.createCaption() +slug: Web/API/HTMLTableElement/createCaption +tags: + - API + - DOM + - HTML DOM + - HTMLTableElement + - Method + - Reference +translation_of: Web/API/HTMLTableElement/createCaption +--- +
{{APIRef("HTML DOM")}}
+ +

Die HTMLTableElement.createCaption() Methode gibt das {{HtmlElement("caption")}} Element zurück, das einer {{HtmlElement("table")}} zugeordnet ist. Wenn in der Tabelle noch kein <caption> Element existiert, wird es durch diese Methode erzeugt und dann zurückgegeben..

+ +
+

Anmerkung: Wenn noch keine Überschrift vorhanden ist, fügt createCaption() sie direkt in die Tabelle ein. Die Überschrift muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <caption> Element mittels {{domxref("Document.createElement()")}} erzeugt hätte.

+
+ +

Syntax

+ +
HTMLTableCaptionElement = table.createCaption();
+ +

Rückgabewert

+ +

{{domxref("HTMLTableCaptionElement")}}

+ +

Beispiel

+ +

Dieses Beispiel verwendet JavaScript, um eine Tabelle um eine Überschrift zu erweitern.

+ +

HTML

+ +
<table>
+  <tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr>
+  <tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr>
+</table>
+ +

JavaScript

+ +
let table = document.querySelector('table');
+let caption = table.createCaption();
+caption.textContent = 'Diese Überschrift wurde mit JavaScript erzeugt!';
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-table-createcaption', 'HTMLTableElement: createCaption')}}{{Spec2('HTML WHATWG')}}
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.HTMLTableElement.createCaption")}}

+
diff --git a/files/de/web/api/htmltableelement/index.html b/files/de/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..696556f62f --- /dev/null +++ b/files/de/web/api/htmltableelement/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLTableElement +--- +

{{APIRef("HTML DOM")}}

+ +

The HTMLTableElement interface provides special properties and methods (beyond the regular {{DOMxRef("HTMLElement")}} object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

Inherits properties from its parent, {{DOMxRef("HTMLElement")}}.

+ +
+
{{DOMxRef("HTMLTableElement.caption")}}
+
Is a {{DOMxRef("HTMLTableCaptionElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <caption>, a {{DOMxRef("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree as the first child of this element and the first <caption> that is a child of this element is removed from the tree, if any.
+
{{DOMxRef("HTMLTableElement.tHead")}}
+
Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <thead>, a {{DOMxRef("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element, and the first <thead> that is a child of this element is removed from the tree, if any.
+
{{DOMxRef("HTMLTableElement.tFoot")}}
+
Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <tfoot>, a {{DOMxRef("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element, and the first <tfoot> that is a child of this element is removed from the tree, if any.
+
{{DOMxRef("HTMLTableElement.rows")}}{{ReadOnlyInline}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all the rows of the element, that is all {{HTMLElement("tr")}} that are a child of the element, or a child of one of its {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} children. The rows members of a <thead> appear first, in tree order, and those members of a <tbody> last, also in tree order. The HTMLCollection is live and is automatically updated when the HTMLTableElement changes.
+
{{DOMxRef("HTMLTableElement.tBodies")}}{{ReadOnlyInline}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all the {{HTMLElement("tbody")}} of the element. The HTMLCollection is live and is automatically updated when the HTMLTableElement changes.
+
+ +

Obsolete Properties

+ +
+

Warning: The following properties are obsolete.  You should avoid using them.

+
+ +
+
+
{{DOMxRef("HTMLTableElement.align")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing an enumerated value reflecting the {{HTMLAttrxRef("align", "table")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are "left", "right", and "center".
+
{{DOMxRef("HTMLTableElement.bgColor")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the background color of the cells. It reflects the obsolete {{HTMLAttrxRef("bgColor", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.border")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the width in pixels of the border of the table. It reflects the obsolete {{HTMLAttrxRef("border", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.cellPadding")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete {{HTMLAttrxRef("cellpadding", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.cellSpacing")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete {{HTMLAttrxRef("cellspacing", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.frame")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the type of the external borders of the table. It reflects the obsolete {{HTMLAttrxRef("frame", "table")}} attribute and can take one of the following values: "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "box", or "border".
+
{{DOMxRef("HTMLTableElement.rules")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the type of the internal borders of the table. It reflects the obsolete {{HTMLAttrxRef("rules", "table")}} attribute and can take one of the following values: "none", "groups", "rows", "cols", or "all".
+
{{DOMxRef("HTMLTableElement.summary")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing a description of the purpose or the structure of the table. It reflects the obsolete {{HTMLAttrxRef("summary", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.width")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete {{HTMLAttrxRef("width", "table")}} attribute.
+
+
+ +

Methods

+ +

Inherits methods from its parent, {{DOMxRef("HTMLElement")}}.

+ +
+
{{DOMxRef("HTMLTableElement.createTHead()")}}
+
Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element.
+
{{DOMxRef("HTMLTableElement.deleteTHead()")}}
+
Removes the first {{HTMLElement("thead")}} that is a child of the element.
+
{{DOMxRef("HTMLTableElement.createTFoot()")}}
+
Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element.
+
{{DOMxRef("HTMLTableElement.deleteTFoot()")}}
+
Removes the first {{HTMLElement("tfoot")}} that is a child of the element.
+
{{DOMxRef("HTMLTableElement.createCaption()")}}
+
Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element. If none is found, a new one is created and inserted in the tree as the first child of the {{HTMLElement("table")}} element.
+
{{DOMxRef("HTMLTableElement.deleteCaption()")}}
+
Removes the first {{HTMLElement("caption")}} that is a child of the element.
+
{{DOMxRef("HTMLTableElement.insertRow()")}}
+
Returns an {{DOMxRef("HTMLTableRowElement")}} representing a new row of the table. It inserts it in the rows collection immediately before the {{HTMLElement("tr")}} element at the given index position. If necessary a {{HTMLElement("tbody")}} is created. If the index is -1, the new row is appended to the collection. If the index is smaller than -1 or greater than the number of rows in the collection, a {{DOMxRef("DOMException")}} with the value IndexSizeError is raised.
+
{{DOMxRef("HTMLTableElement.deleteRow()")}}
+
Removes the row corresponding to the index given in parameter. If the index value is -1 the last row is removed; if it smaller than -1 or greater than the amount of rows in the collection, a {{DOMxRef("DOMException")}} with the value IndexSizeError is raised.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmltableelement", "HTMLTableElement")}}{{Spec2('HTML WHATWG')}}Added the sortable property and the stopSorting() method.
{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}{{Spec2('HTML5 W3C')}}Added the createTBody() method.
{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}{{Spec2('DOM2 HTML')}}Defined when caption, tHead, tFoot, insertRow(), and deleteRow() raise exceptions.
{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLTableElement")}}

+ +

See also

+ + 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 +--- +
{{APIRef("HTML DOM")}}
+ +

Die Methode HTMLTableElement.insertRow() fügt einer vorhandenen {{HtmlElement("table")}} eine neue Zeile ({{HtmlElement("tr")}}) hinzu und gibt eine Referenz auf die neue Zeile zurück.

+ +

Wenn eine Tabelle mehrere {{HtmlElement("tbody")}} Elemente besitzt, wird die neue Zeile standardmäßig dem letzten <tbody> hinzugefügt. Um sie einem bestimmten <tbody> Element hinzuzufügen, beschaffen Sie sich eine Referenz auf das gewünschte <tbody> Element und rufen Sie insertRow() auf diesem Element auf:

+ +
let bestimmter_tbody = document.getElementById(tbody_id);
+let zeile = bestimmter_tbody.insertRow(index)
+ + + +
+

Anmerkung: insertRow() 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 <tr> Element mittels Document.createElement() erzeugt hätte.

+
+ +

Syntax

+ +
var neueZeile = HTMLTableElement.insertRow(index);
+ +

{{domxref("HTMLTableElement")}} ist eine Referenz auf ein HTML {{HtmlElement("table")}} Element.

+ +

Parameters

+ +
+
index {{optional_inline}}
+
Der Zeilenindex der neuen Zeile. Ist der Index -1 or gleich der Anzahl der vorhandenen Zeilen, wird die Zeile als letzte Zeile angefügt. Wenn index größer als die Anzahl vorhandener Zeilen ist, führt dies zi einer IndexSizeError Exception. Wird index weggelassen, ist der Standardwert -1.
+
+ +

Rückgabewert

+ +

neueZeile ist ein {{domxref("HTMLTableRowElement")}}, das die neue Zeile referenziert.

+ +

Beispiel

+ +

Dieses Beispiel verwendet insertRow(-1), um an eine Tabelle eine neue Zeile anzufügen.

+ +

Wir verwenden daraufhin {{domxref("HTMLTableRowElement.insertCell()")}}, um der neuen Zeile noch eine Zelle hinzufügen. (Um gültiges HTML zu sein, muss ein <tr> mindestens ein <td> Element enthalten.) Schließlich fügen wir der Zelle mittels {{domxref("Document.createTextNode()")}} und {{domxref("Node.appendChild()")}} Text hinzu.

+ +

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

+ +
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');
+ +

Result

+ +

{{EmbedLiveSample("Beispiel")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}{{Spec2("DOM2 HTML")}}Spezifiziert genauer, wo die Zeile eingefügt wird.
{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}{{Spec2("DOM1")}}Initiale Definition
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.HTMLTableElement.insertRow")}}

+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf