L'écologie originale de Jquery implémente l'en-tête du tableau pour faire défiler la barre de défilement scrolls

L'écologie originale de Jquery implémente l'en-tête du tableau pour faire défiler la barre de défilement scrolls_jquery

WBOY

Libérer： 2016-05-16 16:55:12

original

1847 Les gens l'ont consulté

Je travaillais récemment sur un projet et la fonction avait été implémentée. Soudain, l'utilisateur a demandé que l'en-tête du tableau soit flottant (car le contenu est affiché sur la même page et les en-têtes de colonnes ne sont pas visibles lors du défilement). Étant donné que la fonction a été implémentée en utilisant du HTML pur jquery, afin de réduire les changements, nous ne pouvons utiliser que l'écologie originale de jquery pour implémenter le défilement.

Code d'entête html :

Copier le code Le code est le suivant :

< ;tr class="header" >

Faculté ;/td>

>
Formation des talents
Structure des titres professionnels
Structure des diplômes
Ratio élèves-enseignant
Projet de recherche scientifique 6">Prix d'excellence en recherche scientifique
Document de recherche scientifique

Unité d'enseignement
Nombre d'étudiants de premier cycle
Nombre d'étudiants diplômés Nombre de personnels enseignants
Nombre de personnels cadres
Nombre de personnels intermédiaires
du personnel titulaire d'un diplôme
Nombre d'employés titulaires d'une maîtrise
Ratio étudiants-enseignant de premier cycle Comparaison des enseignants
Projet vertical
Projet horizontal
Résultats de la recherche scientifique au niveau ministériel
Résultats de la recherche scientifique au niveau provincial
Résultats de la recherche scientifique au niveau de la préfecture >Résultats de la recherche scientifique au niveau scolaire
Autres résultats de la recherche scientifique ;Articles de revues récompensés de première catégorie
Articles de revues récompensés de deuxième catégorie
Articles de revues récompensés de troisième catégorie td>Articles de revues générales
Articles de revues étrangères
Salaire financier

code jquery :

Copier le code

Le code est le suivant :

$(window).scroll(function(){
var headers = $(".header");//Obtenir toutes les lignes d'en-tête, celle actuelle est composée de 3 lignes d'en-têtes
var yy = $(this).scrollTop();//Valeur supérieure de la barre de défilement

if(yy>55){ yy = yy-55 } var height1 = yy ; //La valeur supérieure de la première lignevar height2 = $(headers[0]).height() yy;// Non. La valeur supérieure d'une ligne, la somme de la hauteur de la première ligne et barre de défilement headers[1]).height() yy; $(headers[0]).css({"position":"absolute",top:height1 "px"});//Ligne flottante

$ (headers[1]).css( {"position":"absolu",top:height2 "px"});

$(headers[2]).css({"position":"absolu",haut :height3 "px"}); 

[javascript] view plaincopy 

$("#hiddenTd").height($(headers[0]).height() $(headers[ 1]).height() $( headers[2]).height());//Lorsque l'en-tête flotte, le tableau correspondant le contenu monte automatiquement. Afin de faire flotter l'en-tête, le contenu du tableau ne sera pas écrasé et une ligne vide sera définie. La hauteur sera la hauteur de l'en-tête du tableau
Remarque : lorsque vous utilisez des en-têtes multilignes, n'utilisez pas l'attribut rowspan dans les cellules, sinon les en-têtes seront mal alignés.