Comment geler les lignes et les colonnes d'un tableau à l'aide de JavaScript et CSS ?

Comment figer les lignes et les colonnes d'un tableau avec JavaScript et CSS

Le verrouillage de la première ligne et de la première colonne d'un tableau lors du défilement peut être réalisé en utilisant JavaScript et CSS, simulant la fonctionnalité des « volets figés » d'Excel.

Solution JavaScript

Une solution JavaScript consiste à créer deux tableaux distincts :

1. Un tableau d'en-tête fixe contenant les en-têtes de première ligne et de colonne.
2. Un corps de tableau déroulant contenant les données restantes du tableau.

Les deux tableaux sont positionnés de manière absolue en utilisant CSS, avec la table d'en-tête fixe positionnée au-dessus de la table de corps. Lorsque la page défile, le corps du tableau se déplace indépendamment tandis que l'en-tête fixe reste fixe.

Positionnement CSS

<code class="css">/* Fixed header table */
.fixed-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Scrollable body table */
.scrollable-body {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}</code>

Activation JavaScript

<code class="javascript">// Create a table with the first row as the header
const table = document.createElement('table');
const headerRow = table.createTHead().insertRow();

// Create the first column headings
for (let i = 0; i < numColumns; i++) {
  headerRow.appendChild(document.createElement('th')).innerHTML = 'Heading ' + (i + 1);
}

// Create the body of the table with the remaining data
const body = table.createTBody();
for (let i = 0; i < numRows; i++) {
  const row = body.insertRow();
  for (let j = 0; j < numColumns; j++) {
    row.appendChild(document.createElement('td')).innerHTML = 'Data ' + (i + 1) + ', ' + (j + 1);
  }
}

// Split the table into two: fixed header and scrollable body
const fixedHeader = table.cloneNode(true);
fixedHeader.tBodies[0].remove();

const scrollableBody = table.cloneNode(true);
fixedHeader.tHead.remove();

// Add the two tables to the page
document.body.appendChild(fixedHeader);
document.body.appendChild(scrollableBody);

// Position the tables using CSS
fixedHeader.classList.add('fixed-header');
scrollableBody.classList.add('scrollable-body');</code>

Cette solution fournit un effet de « volets figés » entièrement fonctionnel pour les tableaux, garantissant que la première ligne et la première colonne restent visibles pendant le défilement.

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!