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

Comment réparer l'en-tête dans jquery

王林
Libérer： 2023-05-28 12:17:38
original
903 Les gens l'ont consulté

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

table {
width : 100% ;
border-collapse : collapse}

th, td {

padding : 8px ; : left ;
border-bottom: 1px solid #ddd;
}

th {

background-color: #f2f2f2;

}

tbody {

height: 300px;

overflow-y: scroll;
display: block;
}

Obtenir l'en-tête
  1. 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

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

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

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

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

  1. 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 :
$(window).scroll(function() {

var scroll_top = $(this).scrollTop();

var table_top = $table.offset().top;

if (scroll_top > table_top) {

$thead.css('position', 'fixed');
$thead.css('top', 0);
Copier après la connexion

} else {
$thead.css('position', 'static');
$thead.css('top', '');
Copier après la connexion

}

});

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!

source：php.cn
Article précédent：jquery change les effets d'image Article suivant：remplacement de nodejs
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
1627
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
1783
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
1518
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
1430
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1476
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！