如何使用 JavaScript 建立帶有合併單元格的表格？

使用 JavaScript 建立複雜的表格

在 JavaScript 中，可以使用

來建立表格。和元素。然而，有時需要結構更複雜的表格。

挑戰：建立特定的表格結構

假設您有一個 JavaScript 函數，可以建立一個包含 3 行的表格每行 2 個單元格。如何調整此函數來建立下表：

<code class="html"><table>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td rowspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table></code>

解決方案：使用rowSpan 進行行合併

要建立具有合併單元格的表格，您需要使用rowSpan 屬性。以下是修改程式碼的方法：

JavaScript 程式碼：

<code class="javascript">function tableCreate() {
  const body = document.body;
  const tbl = document.createElement('table');

  for (let i = 0; i < 3; i++) {
    const row = document.createElement('tr');

    for (let j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        continue;
      } else {
        const cell = document.createElement('td');
        cell.textContent = `Cell I${i}/J${j}`;
        if (i === 1 && j === 1) {
          cell.setAttribute('rowspan', '2');
        }
        row.appendChild(cell);
      }
    }
    tbl.appendChild(row);
  }
  body.appendChild(tbl);
}

tableCreate();</code>

說明：

• 說明：
具有 rowSpan 的單元格在 j === 1 迭代中被跳過，以防止重複的單元格。

使用 insertRow 和 insertCell 改進的簡碼：

<code class="javascript">function tableCreate() {
  const body = document.body;
  const tbl = document.createElement('table');
  tbl.style.width = '100px';
  tbl.style.border = '1px solid black';

  for (let i = 0; i < 3; i++) {
    const tr = tbl.insertRow();
    for (let j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        break;
      } else {
        const td = tr.insertCell();
        td.appendChild(document.createTextNode(`Cell I${i}/J${j}`));
        td.style.border = '1px solid black';
        if (i === 1 && j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();</code>

此改進版本使用 insertRow 和 insertCell 方法來實現更簡潔的實作。

以上是如何使用 JavaScript 建立帶有合併單元格的表格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！