Comment réparer l'en-tête dans jquery-Questions et réponses frontales-php.cn

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 :

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

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 :

$(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