HTMLTableCellElement: rowSpan-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
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 nächste strikt positive Zahl begrenz.
Beispiele
Dieses Beispiel bietet zwei Schaltflächen, um die Zeilenspanne der ersten Zelle des Körpers 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> JavaScript
js
// 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
| Specification |
|---|
| HTML # dom-tdth-rowspan |