如何在 JavaScript 中修改表格建立函數以實現具有不同行和單元格計數的特定佈局？

修改特定佈局的表格建立函數

給定一個旨在建立包含3 行和2 個儲存格的表格的JavaScript 函數，此問題尋求有關如何修改後的指導它複製給定的表格佈局，其中有3 行，但第一行和第三行只有2 個單元格，而第二行只有一個跨兩行的單元格。

調整JavaScript 程式碼:

可以使用更簡潔的方法使用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);
}</code>

此程式碼：

• 建立一個寬度為100 像素、黑色邊框的表格。
• 循環 3 行，每次建立一個新行。
• 對於每一行，循環 2 列，為每列建立一個新儲存格。
• 透過將 rowSpan 屬性設為 2 來調整第二行以跨越兩行。
• 檢查行和單元格索引以跳出第二個循環

最終結果：

執行修改後的tableCreate 函數將生成一個具有給定佈局的表格：

Cell I0/J0	Cell I0/J1
Cell I1/J0	Cell I1/J1
Cell I2/J0

以上是如何在 JavaScript 中修改表格建立函數以實現具有不同行和單元格計數的特定佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！