如何在 JavaScript 中建立具有不同行跨度和單元格跨度的複雜表格？

使用 JavaScript 建立複雜表格

在 JavaScript 中，tableCreate() 函數產生一個包含兩行和兩個單元格的簡單表格。但是，可以對其進行修改以建立更複雜的表格，例如提供的表格。

要實現此目的，請修改函數內的 for 迴圈並使用 insertRow 和 insertCell 方法，而不是手動建立元素。這是更新後的程式碼：

<code class="js">function tableCreate() {
  const body = document.body,
        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>

此修改後的程式碼產生一個包含三行和兩個儲存格的表格，第二個儲存格跨越兩行。它使用 CSS 來設定表格的寬度和邊框。請注意，rowSpan 屬性被新增到相交儲存格以指定它應該跨越多行。

以上是如何在 JavaScript 中建立具有不同行跨度和單元格跨度的複雜表格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！