Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/API/HTMLTableCellElement/rowSpan below:

HTMLTableCellElement：rowSpan 属性 - Web API

Baseline Widely available

HTMLTableCellElement 接口的 rowSpan 只读属性表示此单元格必须跨越的行数；这允许单元格在表格的多行之间占据空间。它反映 rowSpan 属性。

一个表示行数的正数。如果是 0，则表示该列中所有剩余行。

备注： 当设置新值时，任何不是 0 的值会被钳制到最接近的严格正数。

示例提供了两个按钮来修改主体第一个单元格的行跨度。

<table>
  <thead>
    <tr>
      <th>列 1</th>
      <th>列 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">增加列跨度</button>
<button id="decrease">减少列跨度</button>
<div>第一个列的第二个单元格跨越<output> 2 </output>行。</div>

table {
  border-collapse: collapse;
}

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

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

// 获取相关接口元素
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;

  // 更新显示
  output.textContent = ` ${cell.rowSpan} `;
});

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

  // 更新显示
  output.textContent = `${cell.rowSpan == 0 ? "所有剩余的" : " " + cell.rowSpan + " "}`;
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4