Comment créer des tableaux avec des cellules de fusion à l'aide de JavaScript ?-js tutoriel-php.cn

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

2075

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

2236

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

1881

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