Comment verrouiller l'en-tête et la première colonne d'un tableau avec JavaScript ?

Verrouillage de l'en-tête et de la première colonne du tableau avec JavaScript

Le gel des volets du tableau est une exigence courante dans les feuilles de calcul et les tableaux, permettant aux utilisateurs de faire défiler sans perdre contexte en verrouillant des lignes ou des colonnes spécifiques. Bien que CSS n'ait pas la capacité de verrouiller les éléments d'un tableau, JavaScript propose une solution.

Solution JavaScript

Pour obtenir cette fonctionnalité, un plugin JavaScript tel que fixed-table-rows -cols peuvent être employés. Ce plugin open source fournit une solution simple pour créer des tableaux déroulants avec des en-têtes et des colonnes fixes.

Le plugin convertit un tableau HTML bien formaté en un tableau déroulant avec des colonnes et des en-têtes fixes. Son utilisation est simple, comme démontré ci-dessous :

<code class="javascript">$('#myTable').fxdHdrCol({
    fixedCols    : 3,       /* 3 fixed columns */
    width        : "100%",  /* set the width of the container (fixed or percentage)*/
    height       : 500      /* set the height of the container */
});</code>

L'option fixedCols spécifie le nombre de colonnes à verrouiller, tandis que les options de largeur et de hauteur contrôlent les dimensions du conteneur. Pour verrouiller la première ligne et la première colonne, définissez fixCols sur 1.

En utilisant ce plugin, les développeurs peuvent facilement implémenter une fonctionnalité de verrouillage de table avec quelques lignes de code, garantissant ainsi que les utilisateurs peuvent naviguer dans de grands ensembles de données sans perdre de vue. d'informations critiques.

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!