Comment créer un tableau complexe avec différents Rowspans et Cellspans en JavaScript ?

Création d'un tableau complexe à l'aide de JavaScript

En JavaScript, la fonction tableCreate() génère un tableau simple avec deux lignes et deux cellules. Cependant, il peut être modifié pour créer un tableau plus complexe, tel que celui fourni.

Pour y parvenir, modifiez les boucles for dans la fonction et utilisez les méthodes insertRow et insertCell au lieu de créer manuellement des éléments. Voici le code mis à jour :

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

Ce code modifié produit un tableau avec trois lignes et deux cellules, la deuxième cellule s'étendant sur deux lignes. Il utilise CSS pour définir la largeur et les bordures du tableau. Notez que l'attribut rowSpan est ajouté à la cellule qui se croise pour spécifier qu'elle doit s'étendre sur plusieurs lignes.

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!