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

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

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

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

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

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

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

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

8. 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);

} else {

$thead.css('position', 'static');
$thead.css('top', '');

}

});

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!