jQuery est une bibliothèque JavaScript largement utilisée qui facilite la manipulation dynamique des pages Web. Les tableaux sont un composant commun dans de nombreuses applications Web. Cependant, lorsque le tableau est trop long, les utilisateurs peuvent avoir besoin de le faire défiler pour afficher le contenu et l'en-tête disparaît du haut de l'écran. Pour rendre le tableau plus facile à utiliser, vous pouvez utiliser jQuery pour épingler l'en-tête en haut de l'écran afin qu'il soit toujours visible. Dans cet article, nous expliquerons comment utiliser jQuery pour corriger l'en-tête.
1. Préparez le tableau
Tout d'abord, vous devez préparer un document HTML contenant le tableau. Voici un exemple de formulaire simple :
Nom
Téléphone
E-mail
Zhang San
1234567890
zhangsan@example.com
John Doe
0987654321
lisi@example.com
王五
4567891230
wangwu@example.com
Ajouter des styles CSS
Ensuite, vous devez ajouter des styles CSS pour que le tableau ressemble et se comporte comme votre site Web ou votre application. Vous pouvez utiliser les styles suivants comme point de départ et les modifier selon vos besoins :
Afin de corriger l'en-tête, vous devez d'abord obtenir la référence de l'en-tête. Vous pouvez obtenir l'en-tête du tableau en utilisant le code suivant :
var $table = $('table');
var $thead = $table.find('thead'); th' );
Obtenir le corps de la table
Ensuite, vous devez obtenir une référence au corps de la table. Afin de maintenir l'en-tête et le corps du tableau alignés, vous devez rendre le corps du tableau défilant et l'afficher en tant qu'élément de niveau bloc. Vous pouvez obtenir le corps du tableau en utilisant le code suivant :
var $tbody = $table.find('tbody');
$tbody.css('display', 'block');
$tbody.css('height ', '300px');
$tbody.css('overflow-y', 'scroll');
Créer un nouveau tableau
Vous devez maintenant créer un nouveau tableau pour contenir l'en-tête et le corps obtenus précédemment . Vous pouvez créer une nouvelle table en utilisant le code suivant :
var $new_table = $('
');
var $new_thead = $('');$new_table.append($new_thead
var $new_tr = $('
'); $new_thead.append($new_tr);
Copier les cellules d'en-tête
Ensuite, vous devez copier chaque cellule dans l'en-tête et ajouter à la première ligne du nouveau tableau. Vous pouvez le faire en utilisant le code suivant :
$th.each(function() {
var $clone = $(this).clone();
$new_tr.append($clone);
});
Insérer une nouvelle table dans le DOM
Enfin, vous devez insérer la nouvelle table dans le DOM avant la table d'origine. Vous pouvez le faire en utilisant le code suivant :
$new_table.insertBefore($table);
En-tête fixe
Vous avez maintenant créé une nouvelle table avec un en-tête fixe et l'avez insérée dans le DOM. Cependant, lorsque l'utilisateur fait défiler l'écran, l'en-tête défile toujours hors de vue. Pour corriger l'en-tête, vous pouvez ajuster la position de l'en-tête en fonction du décalage de défilement lorsqu'un événement de défilement se produit. Vous pouvez utiliser le code suivant pour réaliser cette fonction :
Ce code sera déclenché lorsque la fenêtre défile et définira la position de l'en-tête du tableau sur fixe ou statique en fonction du décalage de défilement . Si le décalage de défilement est supérieur au décalage en haut du tableau, définissez l'en-tête sur fixe. Sinon, définissez l'en-tête sur statique.
À ce stade, vous avez réussi à corriger l'en-tête. Au fur et à mesure que l'utilisateur fait défiler, l'en-tête restera en haut de l'écran et se déplacera avec le défilement. Avec cette astuce simple, vous pouvez facilement améliorer la convivialité et l’accessibilité de votre application Web.
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!
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
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
L'article traite des avantages et des inconvénients des composants contrôlés et incontrôlés dans la réaction, en se concentrant sur des aspects tels que la prévisibilité, la performance et les cas d'utilisation. Il conseille les facteurs à considérer lors du choix entre eux.
