aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/api/console/table/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/de/web/api/console/table/index.html')
-rw-r--r--files/de/web/api/console/table/index.html214
1 files changed, 214 insertions, 0 deletions
diff --git a/files/de/web/api/console/table/index.html b/files/de/web/api/console/table/index.html
new file mode 100644
index 0000000000..c641bf0c6f
--- /dev/null
+++ b/files/de/web/api/console/table/index.html
@@ -0,0 +1,214 @@
+---
+title: Console.table()
+slug: Web/API/Console/table
+tags:
+ - Konsole
+ - Tabelle
+ - log
+ - tabellarisch
+translation_of: Web/API/Console/table
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Zeigt tabellarische Daten als Tabelle im Log an.</span></p>
+
+<p>Diese Funktion benötigt einen Parameter <code>data</code>, welcher ein Array oder ein Objekt sein muss und außerdem einen optionalen Parameter <code>columns</code>.</p>
+
+<p>Die Funktion zeigt <code>data</code> als Tabelle im Log an. Jedes Element im Array (bzw. jede zählbare Eigenschaft im <code>data</code> Objekt) wird als Tabellenzeile angezeigt.</p>
+
+<p>Die erste Tabellenspalte wird mit <code>(index)</code> bezeichnet. Wenn <code>data</code> ein Array ist, dann erscheinen in dieser Spalte die Arrayindizes. Wenn <code>data</code> ein Objekt ist, dann erscheinen in dieser Spalte die Eigenschaftsnamen. Beachten Sie, dass (bei Firefox) <code>console.table</code> maximal 1000 Zeilen anzeigt. (Die erste Zeile ist die Überschriftszeile mit der Bezeichnung index).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Sammlungen_(Collections)_mit_primitiven_Datentypen">Sammlungen (Collections) mit primitiven Datentypen</h3>
+
+<p>Der <code>data</code> Parameter kann ein Array oder ein Objekt sein.</p>
+
+<pre class="brush: js">// Ein String-Array
+
+console.table(["apples", "oranges", "bananas"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p>
+
+<pre class="brush: js">// Ein Objekt mit Eigenschaften, die Strings sind
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p>
+
+<h3 id="Sammlungen_(Collections)_mit_zusammengesetzen_Typen">Sammlungen (Collections) mit zusammengesetzen Typen</h3>
+
+<p>Wenn die Arrayinhalte oder die Objekteigenschaften selbt Arrays oder Objekte sind, dann werden deren Elemente einzeln in jeder Spalte dargestellt:</p>
+
+<pre class="brush: js">// Ein Array, welches Arrays enthält
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);</pre>
+
+<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p>
+
+<pre class="brush: js">// Ein Array mit Objekten
+
+function Person(firstName, lastName) {
+ this.firstName = firstName;
+ this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);</pre>
+
+<p>Beachten Sie: Wenn das Array Objekte enthält, dann werden die Spalten mit dem Eigenschaftsnamen beschriftet.</p>
+
+<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p>
+
+<pre class="brush: js">// Ein Objekt mit Eigenschaften, welche wiederum ein
+// Objekt sind
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);</pre>
+
+<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p>
+
+<h3 id="Auswahl_der_anzuzeigenden_Spalten">Auswahl der anzuzeigenden Spalten</h3>
+
+<p>Nromalerweise zeigt <code>console.table()</code> alle Elemente in jeder Zeile an. Sie können aber den optionalen Parameter <code>columns</code> verwenden, um nur bestimmte Spalten anzuzeigen:</p>
+
+<pre class="brush: js">// Ein Array mit Objekten, nur der "firstName"
+// wird angezeigt.
+
+function Person(firstName, lastName) {
+ this.firstName = firstName;
+ this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);</pre>
+
+<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p>
+
+<h3 id="Tabelle_sortieren">Tabelle sortieren</h3>
+
+<p>Sie können die Tabelle durch einen Klick auf den jeweiligen Spaltenkopf umsortieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Die anzuzeigenden Daten. Diese müssen ein Array oder ein Objekt sein.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Ein Array mit den anzuzeigenden Spalten.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName("Console API", "#table", "console.table()")}}</td>
+ <td>{{Spec2("Console API")}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("34.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td>Available in workers</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("38.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Edge</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("34.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td>Available in workers</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("38.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>