Comment créer des tableaux HTML complexes avec des lignes et des cellules fusionnées à l'aide de JavaScript ?

Recréer une structure de tableau HTML complexe à l'aide de JavaScript

Dans cet article, nous aborderons une problématique spécifique rencontrée par les développeurs : la création d'un Structure de tableau HTML utilisant JavaScript. Examinons le problème et sa solution.

Problème :

Il existe une fonction JavaScript qui crée un tableau simple avec 3 lignes et 2 colonnes. Le défi consiste à modifier la fonction pour générer une structure de tableau plus complexe avec des étendues de lignes variables et des cellules fusionnées, comme illustré dans le code HTML fourni.

Solution :

Pour Pour y parvenir, nous utiliserons les méthodes intégrées insertRow et insertCell fournies par HTML DOM. Voici le code JavaScript révisé :

<code class="javascript">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 &amp;&amp; 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 &amp;&amp; j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();</code>

Explication :

Le code parcourt les lignes et les colonnes du tableau, créant des cellules individuelles à l'aide de insertCell et définissant leurs propriétés en conséquence. La condition if (i === 1 && j === 1) { td.setAttribute('rowSpan', '2'); } est crucial. Il gère l'étendue des lignes de la cellule fusionnée dans la ligne 2.

En utilisant les méthodes insertRow et insertCell, nous avons un meilleur contrôle sur la structure du tableau, ce qui nous permet de créer rapidement et dynamiquement des tableaux complexes avec différentes étendues de lignes et des cellules fusionnées. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!