Rumah hujung hadapan web tutorial js jQuery实现表头固定效果的实例代码_jquery

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

May 16, 2016 pm 05:33 PM
tetap Kesan Kepala

一、新建一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类库文件。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih Apr 03, 2024 am 08:13 AM

Anda mungkin menghadapi masalah garis hijau yang muncul pada skrin telefon pintar anda Walaupun anda tidak pernah melihatnya, anda mesti melihat gambar berkaitan di Internet. Jadi, pernahkah anda menghadapi situasi di mana skrin jam tangan pintar bertukar menjadi putih? Pada 2 April, CNMO mendapat tahu daripada media asing bahawa seorang pengguna Reddit berkongsi gambar di platform sosial, menunjukkan skrin jam tangan pintar siri Samsung Watch bertukar menjadi putih. Pengguna menulis: "Saya sedang mengecas apabila saya pergi, dan apabila saya kembali, ia adalah seperti ini. Saya cuba untuk memulakan semula, tetapi skrin masih seperti ini semasa proses mulakan semula skrin jam tangan pintar Samsung Watch." Pengguna Reddit tidak menyatakan model khusus. Walau bagaimanapun, jika dilihat dari gambar, ia sepatutnya Samsung Watch5. Sebelum ini, seorang lagi pengguna Reddit turut melaporkan

Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya Mar 25, 2024 am 09:36 AM

Apabila mencipta mesin maya, anda akan diminta untuk memilih jenis cakera, anda boleh memilih cakera tetap atau cakera dinamik. Bagaimana jika anda memilih cakera tetap dan kemudian menyedari bahawa anda memerlukan cakera dinamik, atau sebaliknya. Anda boleh menukar satu kepada yang lain? Dalam siaran ini, kita akan melihat cara menukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya. Cakera dinamik ialah cakera keras maya yang pada mulanya mempunyai saiz kecil dan membesar dalam saiz semasa anda menyimpan data dalam mesin maya. Cakera dinamik sangat cekap dalam menjimatkan ruang storan kerana ia hanya mengambil sebanyak mungkin ruang storan hos seperti yang diperlukan. Walau bagaimanapun, apabila kapasiti cakera berkembang, prestasi komputer anda mungkin terjejas sedikit. Cakera tetap dan cakera dinamik biasanya digunakan dalam mesin maya

Bagaimana untuk menetapkan kertas dinding skrin kunci komputer yang tidak akan berubah Bagaimana untuk menetapkan kertas dinding skrin kunci komputer yang tidak akan berubah Jan 17, 2024 pm 03:24 PM

Secara umumnya, corak latar belakang desktop komputer boleh dilaraskan oleh pengguna. Walau bagaimanapun, bagi sesetengah pengguna Windows 10, mereka mahu dapat membetulkan imej latar belakang desktop pada komputer mereka, tetapi mereka tidak tahu cara untuk menetapkannya. Malah, ia sangat mudah dan mudah dikendalikan. Cara membetulkan kertas dinding skrin kunci komputer tanpa mengubahnya 1. Klik kanan gambar yang anda ingin tetapkan dan pilih Tetapkan sebagai gambar latar belakang 2. Win+R untuk membuka dan menjalankan, kemudian masukkan "gpedit.msc" 3. Kembangkan ke: Konfigurasi Pengguna - Templat Pengurusan - Panel Kawalan - Pemperibadian 4. Klik Pemperibadian, dan kemudian pilih "Cegah perubahan pada latar belakang desktop" 5. Pilih Didayakan 6. Kemudian buka tetapan dan masukkan latar belakang Apabila anda melihat perkataan kecil ini, ia bermakna ia telah ditetapkan.

Cara memastikan panel widget sentiasa kelihatan dalam Windows 11 Cara memastikan panel widget sentiasa kelihatan dalam Windows 11 Aug 13, 2023 pm 07:13 PM

Bagaimana untuk sentiasa menunjukkan papan widget semasa membuka Windows 11? Nah, anda boleh mulakan dengan memuat turun dan memasang kemas kini Windows terkini. Dalam tampung kemas kini terbaharu untuk Program Insider, Microsoft mendedahkan bahawa pengguna dalam saluran Pembangunan dan Canary akan dapat menyemat papan widget terbuka supaya ia sentiasa kelihatan sepintas lalu. Cara Sentiasa Tunjukkan Papan Widget Terbuka dalam Windows 11 Menurut Microsoft, untuk menyemat papan untuk dibuka, cuma klik pada ikon tekan tekan di sudut kanan atas papan. Setelah papan anda disematkan terbuka, papan widget tidak akan mengabaikan penutupan lagi. Semasa papan disematkan, anda masih boleh menutupnya dengan membuka papan widget melalui butang Widget pada bar tugas. apabila widget

Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara Mar 28, 2024 am 11:11 AM

Bercakap tentang ASSASSIN, saya percaya pemain pasti akan memikirkan pembunuh utama dalam "Assassin's Creed". casis domestik/bekalan kuasa/penyejukan yang terkenal Siri ASSASSIN radiator penyejuk udara utama daripada jenama perkakas DeepCool bertepatan antara satu sama lain. Baru-baru ini, produk terbaharu siri ini, ASSASSIN4S, telah dilancarkan "Assassin in Suit, Advanced" membawakan pengalaman penyejukan udara baharu kepada pemain maju. Penampilannya penuh dengan perincian. Radiator Assassin 4S menggunakan struktur menara berkembar + reka bentuk terbina dalam kipas tunggal warna untuk memenuhi warna yang berbeza

Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos Apr 17, 2024 pm 05:07 PM

Dengan ketibaan musim bunga, segala-galanya pulih dan segala-galanya penuh dengan daya hidup dan kecergasan. Dalam musim yang indah ini, bagaimana untuk menambah sentuhan warna pada kehidupan rumah anda? Projektor Haqu H2, dengan reka bentuk yang indah dan keberkesanan kos yang tinggi, telah menjadi keindahan yang sangat diperlukan pada musim bunga ini. Projektor H2 ini padat tetapi bergaya. Sama ada diletakkan di atas kabinet TV di ruang tamu atau di sebelah meja sisi katil di dalam bilik tidur, ia boleh menjadi landskap yang indah. Badannya diperbuat daripada tekstur matte putih susu Reka bentuk ini bukan sahaja menjadikan projektor kelihatan lebih maju, tetapi juga meningkatkan keselesaan sentuhan. Bahan bertekstur kulit kuning air menambah sentuhan kemesraan dan keanggunan pada penampilan keseluruhan. Gabungan warna dan bahan ini bukan sahaja menepati trend estetik rumah moden, tetapi juga boleh diintegrasikan ke dalam

Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat Mar 28, 2024 pm 03:20 PM

Dengan saiznya yang padat, platform ITX telah menarik ramai pemain yang mengejar keindahan terunggul dan unik Dengan peningkatan proses pembuatan dan kemajuan teknologi, kedua-dua kad grafik siri Core dan RTX40 generasi ke-14 Intel boleh menggunakan kekuatan mereka pada platform ITX, dan. pemain juga Terdapat keperluan yang lebih tinggi untuk bekalan kuasa SFX. Penggemar permainan Huntkey telah melancarkan bekalan kuasa siri MX baharu Dalam platform ITX yang memenuhi keperluan berprestasi tinggi, bekalan kuasa modul penuh MX750P mempunyai kuasa penarafan sehingga 750W dan telah lulus pensijilan tahap platinum 80PLUS. Di bawah kami bawakan penilaian bekalan kuasa ini. Bekalan kuasa modul penuh Huntkey MX750P menggunakan konsep reka bentuk yang ringkas dan bergaya Terdapat dua model hitam dan putih untuk dipilih oleh pemain kedua-duanya menggunakan rawatan permukaan matte dan mempunyai tekstur yang baik dengan fon perak kelabu dan merah.

Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja. Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja. Apr 23, 2024 am 08:04 AM

Model besar yang boleh menganalisis kandungan PDF, halaman web, poster dan carta Excel secara automatik tidak terlalu mudah untuk pekerja. Model InternLM-XComposer2-4KHD (disingkat IXC2-4KHD) yang dicadangkan oleh Shanghai AILab, Universiti China Hong Kong dan institusi penyelidikan lain menjadikan perkara ini menjadi kenyataan. Berbanding dengan model besar berbilang modal lain yang mempunyai had resolusi tidak lebih daripada 1500x1500, kerja ini meningkatkan imej input maksimum model besar berbilang mod kepada lebih resolusi 4K (3840x1600) dan menyokong sebarang nisbah aspek dan 336 piksel kepada 4K Perubahan resolusi dinamik. Tiga hari selepas dikeluarkan, model itu mengungguli senarai populariti model menjawab soalan visual HuggingFace. Mudah dikendalikan

See all articles