Maison >interface Web >js tutoriel >Comment créer des tableaux avec des cellules de fusion à l'aide de JavaScript ?

Comment créer des tableaux avec des cellules de fusion à l'aide de JavaScript ?

Mary-Kate Olsenoriginal: 2024-10-19 08:17:31462parcourir

How to Create Tables with Merge Cells Using JavaScript?

Création de tableaux complexes à l'aide de JavaScript

En JavaScript, la création de tableaux peut être effectuée à l'aide de l'outil

et éléments. Cependant, parfois, des tableaux avec des structures plus complexes sont nécessaires.

Défi : créer une structure de tableau spécifique

Supposons que vous disposiez d'une fonction JavaScript qui crée un tableau avec 3 lignes. et 2 cellules dans chaque rangée. Comment adapter cette fonction pour créer le tableau suivant :

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

Solution : Fusion de lignes avec rowSpan

Pour créer le tableau avec une cellule fusionnée, vous avez besoin pour utiliser l'attribut rowSpan. Voici comment modifier votre code :

Code JavaScript :

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

Explication :

Le L'attribut rowSpan est ajouté à la deuxième cellule de la deuxième ligne, en la fusionnant avec la cellule ci-dessous.
La cellule avec rowSpan est ignorée dans l'itération j === 1 pour éviter les cellules en double.

Shortcode amélioré utilisant insertRow et 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>

Cette version améliorée utilise les méthodes insertRow et insertCell pour une implémentation plus concise.

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!

JavaScript for using Attribute function this table tbody

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer des tableaux HTML complexes avec des lignes et des cellules fusionnées à l'aide de JavaScript ?Article suivant：Comment créer des tableaux HTML complexes avec des lignes et des cellules fusionnées à l'aide de JavaScript ?

Articles Liés

Voir plus