HTMLTableCellElement: свойство rowSpan
Базовая линия Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.
Свойство rowSpan только для чтения интерфейса HTMLTableCellElement представляет количество строк, на которое должна занимать эта ячейка; это позволяет ячейке занимать место в нескольких строках таблицы. Оно отражает атрибут rowspan.
Значение
Положительное число, представляющее количество строк. Если оно равно 0, это означает все оставшиеся строки в столбце.
Примечание: При установке нового значения, значение, отличное от 0, ограничивается ближайшим строго положительным числом.
Примеры
Этот пример предоставляет две кнопки для изменения интервала строк первой ячейки тела.
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
// 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 = cell.rowSpan + 1;
// Update the display
output.textContent = cell.rowSpan;
});
decreaseButton.addEventListener("click", () => {
cell.rowSpan = cell.rowSpan - 1;
// Update the display
output.textContent = `${cell.rowSpan == 0 ? "all remaining" : cell.rowSpan}`;
});
Результат
Спецификации
| Спецификация |
|---|
| HTML # dom-tdth-rowspan |
Совместимость браузеров
| Рабочий стол | Мобильный | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
rowSpan |
1 | 12 | 1 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement/rowSpan