Comment modifier une fonction de création de tableau pour obtenir une mise en page spécifique avec des nombres de lignes et de cellules variables en JavaScript ?

Modification de la fonction de création de tableau pour une mise en page spécifique

Étant donné une fonction JavaScript conçue pour créer un tableau avec 3 lignes et 2 cellules, cette question cherche des conseils sur la façon de modifier il permet de reproduire une disposition de tableau donnée où il y a 3 lignes, mais seulement 2 cellules dans les première et troisième lignes, tandis que la deuxième ligne n'a qu'une seule cellule qui s'étend sur deux lignes.

Adaptation du code JavaScript :

La fonction existante peut être adaptée en utilisant une approche plus succincte avec les méthodes insertRow et insertCell, comme indiqué ci-dessous :

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

Ce code :

• Crée un tableau d'une largeur de 100 pixels et une bordure noire.
• Parcourt 3 lignes, créant une nouvelle ligne à chaque fois.
• Pour chaque ligne, il parcourt 2 colonnes , créant une nouvelle cellule pour chaque colonne.
• Ajuste la deuxième ligne pour qu'elle s'étende sur deux lignes en définissant l'attribut rowSpan sur 2.
• Inspecte les indices de ligne et de cellule pour sortir de la deuxième boucle pour la mise en page souhaitée.

Résultat final :

L'exécution de la fonction tableCreate modifiée générera un tableau avec la mise en page donnée :

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

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!