HTMLTableCellElement: rowSpan-Eigenschaft

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die rowSpan-Eigenschaft des HTMLTableCellElement-Interfaces gibt die Anzahl der Reihen an, die diese Zelle berspannen muss; damit kann die Zelle Platz ber mehrere Reihen der Tabelle hinweg einnehmen. Sie spiegelt das rowspan-Attribut wider.

Wert

Eine positive Zahl, die die Anzahl der Reihen darstellt. Wenn sie 0 ist, bedeutet dies alle verbleibenden Reihen in der Spalte.

Hinweis: Beim Setzen eines neuen Werts wird ein Wert, der nicht 0 ist, auf die nchste strikt positive Zahl begrenz.

Beispiele

Dieses Beispiel bietet zwei Schaltflchen, um die Zeilenspanne der ersten Zelle des Krpers zu ndern.

HTML

html

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan="2">2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
    </tr>
  </tbody>
</table>
<button id="increase">Increase rowspan</button>
<button id="decrease">Decrease rowspan</button>
<div>The second cell of the first column spans <output>2</output> row(s).</div>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

// Obtain relevant interface elements
const row = document.querySelectorAll("tbody tr")[1];
const cell = row.cells[0];
const output = document.querySelectorAll("output")[0];

const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("decrease");

increaseButton.addEventListener("click", () => {
  cell.rowSpan += 1;

  // Update the display
  output.textContent = cell.rowSpan;
});

decreaseButton.addEventListener("click", () => {
  cell.rowSpan -= 1;

  // Update the display
  output.textContent = `${cell.rowSpan === 0 ? "all remaining" : cell.rowSpan}`;
});

Ergebnis

Spezifikationen

Spezifikation
HTML # dom-tdth-rowspan

Browser-Kompatibilitt

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden