How to Create Tables with Merge Cells Using JavaScript?-JS Tutorial-php.cn

How to Create Tables with Merge Cells Using JavaScript?

Creating Complex Tables Using JavaScript

In JavaScript, the creation of tables can be performed using the

and elements. However, sometimes, tables with more intricate structures are required.

Challenge: Creating a Specific Table Structure

Suppose you have a JavaScript function that creates a table with 3 rows and 2 cells in each row. How can you adapt this function to create the following table:

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

Copy after login

Solution: Row Merging with rowSpan

To create the table with a merged cell, you need to use the rowSpan attribute. Here's how you can modify your code:

JavaScript Code:

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

Copy after login

Explanation:

The rowSpan attribute is added to the second cell in the second row, merging it with the cell below.
The cell with rowSpan is skipped in the j === 1 iteration to prevent duplicate cells.

Improved Shortcode Using insertRow and 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>

Copy after login

This improved version uses the insertRow and insertCell methods for a more concise implementation.

The above is the detailed content of How to Create Tables with Merge Cells Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

source：php

Previous article：How to Create Complex HTML Tables with Rowspans and Merged Cells Using JavaScript? Next article：How to Create a Complex Table with Different Rowspans and Cellspans in JavaScript?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn