简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

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

Mary-Kate Olsen
Libérer： 2024-10-19 08:17:31
original
330 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source：php
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 un tableau complexe avec différents Rowspans et Cellspans en JavaScript ?
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1616
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1769
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1511
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1423
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1468
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！