您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

JavaScript 動態操作 Table：插入行、修改 rowspan 屬性的標準 DOM API 實現

編輯：程式設計疑難解答

需求場景

現有 HTML 表格：

<table id="tb">
  <tr>
    <td rowspan="2"></td>
  </tr>
</table>

需求：動態插入一行 ``，在新單元格寫入值，並將原首行首單元格的 `rowspan` 從 2 改為 3。

標準 DOM API 實現

<table id="tb">
  <tr>
    <td rowspan="2">原始儲存格</td>
  </tr>
</table>

<script>
  // 1. 獲取 table 引用
  var tb = document.getElementById('tb');

  // 2. 在表格末尾插入新行 (insertRow 參數 -1 或 rows.length 均為末尾)
  var newRow = tb.insertRow(-1); // 返回 HTMLTableRowElement

  // 3. 在新行插入單元格 (insertCell 索引 0 為第一列)
  var newCell = newRow.insertCell(0);
  newCell.innerHTML = '11111'; // 寫入內容

  // 4. 修改原首行首單元格的 rowspan
  // tb.rows[0] -> 第一行, .cells[0] -> 第一個單元格
  tb.rows[0].cells[0].rowSpan = 3;

  // 驗證：console.log(tb.rows[0].cells[0].rowSpan); // 輸出 3
</script>

關鍵 API 解析

API	說明	參數/返回值
`table.insertRow(index)`	插入行	index: -1 或省略為末尾；返回 `HTMLTableRowElement`
`row.insertCell(index)`	插入單元格	index: 列索引；返回 `HTMLTableCellElement`
`cell.rowSpan`	獲取/設置 rowspan 屬性	數值類型，對應 HTML 屬性
`table.rows`	行集合	`HTMLCollection`，即時動態更新
`row.cells`	單元格集合	`HTMLCollection`，跨行合併時僅包含該行實際擁有的單元格

進階場景：指定位置插入

// 在第 2 行之前插入 (索引 1)
var row = tb.insertRow(1);
var cell = row.insertCell(0);
cell.textContent = '新行內容';

// 修改受影響行的 rowspan (需根據具體合併邏輯計算)
// 例如：原第 1 行 rowspan=2 跨第1、2行，現插入行變第2行，需改 rowspan=3
tb.rows[0].cells[0].rowSpan = 3;

注意事項

tbody 隱式存在：即使 HTML 未寫 ``，瀏覽器會自動創建，`table.rows` 包含所有 `` 內的行，操作不受影響。
rowspan 修改即時生效：設置 `rowSpan` 後瀏覽器立即重排，視覺上合併單元格擴展。
跨瀏覽器兼容：上述 API 為 DOM Level 1 標準，IE6+、所有現代瀏覽器完美支持。
jQuery 寫法：`$('#tb').append('11111'); $('#tb tr:first td:first').attr('rowspan', 3);` 但原生 API 更輕量、無依賴。

總結

使用 HTMLTableElement.insertRow()、HTMLTableRowElement.insertCell() 和 HTMLTableCellElement.rowSpan 三大核心 API，即可輕鬆實現表格動態插入行、寫入數據、修改跨行合併屬性，代碼簡潔、標準、高效。