How to Create a Complex Table with Different Rowspans and Cellspans in JavaScript?

Creating a Complex Table Using JavaScript

In JavaScript, the tableCreate() function generates a straightforward table with two rows and two cells. However, it can be modified to create a more intricate table, such as the one provided.

To achieve this, modify the for loops within the function and employ insertRow and insertCell methods instead of manually creating elements. Here's the updated code:

<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>

This modified code produces a table with three rows and two cells, with the second cell spanning two rows. It uses CSS to set the table's width and borders. Note that the rowSpan attribute is added to the intersecting cell to specify that it should span multiple rows.

The above is the detailed content of How to Create a Complex Table with Different Rowspans and Cellspans in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!