Maison interface Web js tutoriel jQuery实现表头固定效果的实例代码_jquery

jQuery实现表头固定效果的实例代码_jquery

May 16, 2016 pm 05:33 PM
固定 效果 Entête

一、新建一js文件jQuery_FixedTableHead.js

内容如下:

复制代码 代码如下:

jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {

    var obj = document.getElementById("tableHeaderDiv" + tableId);

    if (obj) {

        jQuery(obj).remove();

    }

    var browserName = navigator.appName;

    var ver = navigator.appVersion;

    var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows")));

    var content = document.getElementById(tableParentDivId);

    var scrollWidth = content.offsetWidth - content.clientWidth;

    var tableOrg = jQuery("#" + tableId)

    var table = tableOrg.clone();

    table.attr("id", "cloneTable");

    var tableClone = jQuery(tableOrg).find("tr").each(function() {

    });

    var tableHeader = jQuery(tableOrg).find("thead");

    var tableHeaderHeight = tableHeader.height();

    tableHeader.hide();

    var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() {

        return jQuery(this).width();

    });

    var tableCloneCols = jQuery(table).find("thead tr:first td")

    if (colsWidths.size() > 0) {

        for (i = 0; i

            if (i == tableCloneCols.size() - 1) {

                if (browserVersion == 8.0)

                    tableCloneCols.eq(i).width(colsWidths[i] + scrollWidth);

                else

                    tableCloneCols.eq(i).width(colsWidths[i]);

            } else {

                tableCloneCols.eq(i).width(colsWidths[i]);

            }

        }

    }

    var headerDiv = document.createElement("div");

    headerDiv.appendChild(table[0]);

    jQuery(headerDiv).css("height", tableHeaderHeight);

    jQuery(headerDiv).css("overflow", "hidden");

    jQuery(headerDiv).css("z-index", "20");

    jQuery(headerDiv).css("width", "100%");

    jQuery(headerDiv).attr("id", "tableHeaderDiv" + tableId);

    jQuery(headerDiv).insertBefore(tableOrg.parent());

}

二、Html实例文件

内容如下:

复制代码 代码如下:

   

qubernet@163.com_jQuery实现表头固定效果(挺不错的!!!)

 

   

 

   

 

   

        .itemList

        {

            border: solid 1px #cccccc;

            overflow: hidden;

            width: 100%;

            border-collapse: collapse;

        }

        .itemList td

        {

            padding: 0px 0px 0px 0px;

            color: #444444;

            border: solid 1px #cccccc;

            text-align: center;

            line-height: 20px;

        }

   

   

        jQuery(function() {

            jQuery.fn.CloneTableHeader("tab1", "div1");

        });

   

   

   

       

           

               

                   

                   

                   

                   

               

           

           

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

           

       

                        列1

                   

                        列2

                   

                        列3

                   

                        列4

                   

我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………
我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行………… 我是测试的数据行…………

   

   


注意:记得引入jQuery类库文件。

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Les utilisateurs rencontrent de rares problèmes : les montres intelligentes Samsung Watch rencontrent soudainement des problèmes d'écran blanc Les utilisateurs rencontrent de rares problèmes : les montres intelligentes Samsung Watch rencontrent soudainement des problèmes d'écran blanc Apr 03, 2024 am 08:13 AM

Vous avez peut-être rencontré le problème des lignes vertes apparaissant sur l'écran de votre smartphone. Même si vous ne l'avez jamais vu, vous avez sûrement vu des images associées sur Internet. Alors, avez-vous déjà rencontré une situation où l’écran de la montre intelligente devient blanc ? Le 2 avril, CNMO a appris par des médias étrangers qu'un utilisateur de Reddit avait partagé une photo sur la plateforme sociale, montrant l'écran des montres intelligentes de la série Samsung Watch devenant blanc. L'utilisateur a écrit : « J'étais en train de charger quand je suis parti, et quand je suis revenu, c'était comme ça. J'ai essayé de redémarrer, mais l'écran était toujours comme ça pendant le processus de redémarrage. L'écran de la montre intelligente Samsung Watch est devenu blanc. L'utilisateur de Reddit n'a pas précisé le modèle spécifique de la montre intelligente. Cependant, à en juger par l’image, il devrait s’agir de la Samsung Watch5. Auparavant, un autre utilisateur de Reddit avait également signalé

Comment définir un fond d'écran de verrouillage d'ordinateur qui ne changera pas Comment définir un fond d'écran de verrouillage d'ordinateur qui ne changera pas Jan 17, 2024 pm 03:24 PM

D'une manière générale, le motif d'arrière-plan du bureau d'un ordinateur peut être ajusté par l'utilisateur. Cependant, certains utilisateurs de Windows 10 souhaitent pouvoir corriger l’image d’arrière-plan du bureau sur leur ordinateur, mais ils ne savent pas comment la définir. En fait, c’est très simple et facile à utiliser. Comment réparer le fond d'écran de l'écran de verrouillage de l'ordinateur sans le modifier 1. Cliquez avec le bouton droit sur l'image que vous souhaitez définir et sélectionnez Définir comme image d'arrière-plan 2. Win+R pour ouvrir et exécuter, puis entrez « gpedit.msc » 3. Développez jusqu'à : Configuration utilisateur - Modèles de gestion - Panneau de configuration-Personnalisation 4. Cliquez sur Personnalisation, puis sélectionnez "Empêcher les modifications de l'arrière-plan du bureau". 5. Sélectionnez Activé 6. Ouvrez ensuite les paramètres et entrez l'arrière-plan. Lorsque vous voyez ces petits mots, cela signifie que c'est le cas. a été mis en.

Convertir le disque fixe VirtualBox en disque dynamique et vice versa Convertir le disque fixe VirtualBox en disque dynamique et vice versa Mar 25, 2024 am 09:36 AM

Lors de la création d'une machine virtuelle, il vous sera demandé de sélectionner un type de disque, vous pouvez sélectionner un disque fixe ou un disque dynamique. Et si vous choisissez des disques fixes et réalisez plus tard que vous avez besoin de disques dynamiques, ou vice versa, vous pouvez convertir l'un en l'autre ? Dans cet article, nous verrons comment convertir un disque fixe VirtualBox en disque dynamique et vice versa. Un disque dynamique est un disque dur virtuel qui a initialement une petite taille et qui augmente à mesure que vous stockez des données dans la machine virtuelle. Les disques dynamiques sont très efficaces pour économiser de l'espace de stockage, car ils n'occupent que l'espace de stockage de l'hôte nécessaire. Cependant, à mesure que la capacité du disque augmente, les performances de votre ordinateur peuvent être légèrement affectées. Les disques fixes et les disques dynamiques sont couramment utilisés dans les machines virtuelles

Comment garder le panneau des widgets toujours visible dans Windows 11 Comment garder le panneau des widgets toujours visible dans Windows 11 Aug 13, 2023 pm 07:13 PM

Comment toujours afficher le tableau des widgets lors de l’ouverture sous Windows 11 ? Eh bien, vous pouvez commencer par télécharger et installer les dernières mises à jour Windows. Dans le dernier correctif de mise à jour du programme Insider, Microsoft a révélé que les utilisateurs des canaux Développement et Canary pourront épingler le tableau des widgets afin qu'il soit toujours visible d'un coup d'œil. Comment toujours afficher le tableau des widgets ouvert dans Windows 11 Selon Microsoft, pour épingler un tableau à ouvrir, cliquez simplement sur l'icône en forme de punaise dans le coin supérieur droit du tableau. Une fois votre tableau épinglé ouvert, le tableau des widgets n'ignorera plus la fermeture. Pendant que le tableau est épinglé, vous pouvez toujours le fermer en ouvrant le tableau des widgets via le bouton Widgets de la barre des tâches. quand le widget

Examen du radiateur Kyushu Fengshen Assassin 4S Style 'Assassin Master' refroidi par air Examen du radiateur Kyushu Fengshen Assassin 4S Style 'Assassin Master' refroidi par air Mar 28, 2024 am 11:11 AM

En parlant d'ASSASSIN, je pense que les joueurs penseront certainement aux maîtres assassins d'"Assassin's Creed". Ils sont non seulement talentueux, mais ont aussi le credo de "se consacrer aux ténèbres et au service de la lumière". châssis/alimentation/refroidissement domestiques bien connus La série ASSASSIN de radiateurs refroidis par air phares de la marque d'appareils DeepCool coïncide les uns avec les autres. Récemment, le dernier produit de cette série, ASSASSIN4S, a été lancé "Assassin in Suit, Advanced" et apporte une nouvelle expérience de refroidissement par air aux joueurs avancés. L'apparence est pleine de détails. Le radiateur Assassin 4S adopte une structure à double tour + un seul ventilateur intégré. L'extérieur est recouvert d'un carénage en forme de cube, qui a un fort sens général. Couleurs pour répondre à différentes couleurs.

Art exquis de la lumière et de l'ombre au printemps, Haqu H2 est le choix rentable Art exquis de la lumière et de l'ombre au printemps, Haqu H2 est le choix rentable Apr 17, 2024 pm 05:07 PM

Avec l’arrivée du printemps, tout renaît et tout est plein de vitalité et de vitalité. En cette belle saison, comment ajouter une touche de couleur à votre intérieur ? Le projecteur Haqu H2, avec son design exquis et son excellent rapport coût-efficacité, est devenu une beauté indispensable ce printemps. Ce projecteur H2 est compact mais élégant. Qu'il soit placé sur le meuble TV du salon ou à côté de la table de chevet dans la chambre, il peut devenir un magnifique paysage. Son corps est fait d'une texture mate blanc laiteux. Cette conception donne non seulement au projecteur un aspect plus avancé, mais augmente également le confort du toucher. Le matériau texturé en cuir beige ajoute une touche de chaleur et d'élégance à l'apparence générale. Cette combinaison de couleurs et de matériaux est non seulement conforme à la tendance esthétique des maisons modernes, mais peut également être intégrée dans

Test de l'alimentation à module complet Huntkey MX750P : 750 W de puissance concentrée en platine Test de l'alimentation à module complet Huntkey MX750P : 750 W de puissance concentrée en platine Mar 28, 2024 pm 03:20 PM

Grâce à sa taille compacte, la plate-forme ITX a attiré de nombreux acteurs à la recherche d'une beauté ultime et unique. Grâce à l'amélioration des processus de fabrication et aux progrès technologiques, les cartes graphiques Intel Core de 14e génération et les séries RTX40 peuvent exercer leur force sur la plate-forme ITX. les joueurs ont également des exigences plus élevées en matière d'alimentation SFX. Huntkey, passionné de jeux, a lancé une nouvelle alimentation de la série MX dans la plate-forme ITX qui répond aux exigences de haute performance, l'alimentation à module complet MX750P a une puissance nominale allant jusqu'à 750 W et a passé la certification de niveau platine 80PLUS. Ci-dessous, nous apportons l’évaluation de cette alimentation. L'alimentation à module complet Huntkey MX750P adopte un concept de design simple et à la mode. Il existe deux modèles en noir et blanc parmi lesquels les joueurs peuvent choisir. Les deux utilisent un traitement de surface mat et ont une bonne texture avec des polices gris argenté et rouge.

Test du Colorful Hidden Star P15 24 : un ordinateur portable de jeu polyvalent avec une belle apparence et des performances Test du Colorful Hidden Star P15 24 : un ordinateur portable de jeu polyvalent avec une belle apparence et des performances Mar 06, 2024 pm 04:40 PM

Dans l’ère actuelle de développement technologique rapide, les ordinateurs portables sont devenus un outil indispensable et important dans la vie quotidienne et au travail des gens. Pour les joueurs qui ont des exigences de performances élevées, un ordinateur portable doté d’une configuration puissante et d’excellentes performances peut répondre à leurs besoins les plus exigeants. Avec ses excellentes performances et son design époustouflant, l'ordinateur portable Colorful Hidden Star P15 est devenu le leader du futur et peut être qualifié de modèle d'ordinateurs portables durs. Colorful Hidden Star P1524 est équipé d'un processeur Intel Core i7 de 13e génération et d'un GPU RTX4060Laptop. Il adopte un style de conception de vaisseau spatial plus à la mode et offre d'excellentes performances dans les détails. Jetons d'abord un coup d'œil aux fonctionnalités de ce portable. Supreme équipé du processeur Intel Core i7-13620H

See all articles