Kaedah jQuery untuk membekukan table headers_jquery

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan pengepala jadual beku. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ketika saya sedang mengerjakan projek suatu ketika dahulu, saya perlu memaparkan senarai, tetapi kerana terdapat terlalu banyak data, pengepala jadual terpaksa dibekukan semasa menatal, jadi saya menulis skrip berikut (saya juga menemui skrip yang sepadan di Internet, tetapi tidak terlalu banyak) Ideal, jadi saya menulisnya sendiri, tetapi pada masa ini, kerana projek itu hanya menggunakan pembekuan pengepala jadual, dan tidak perlu menentukan pembekuan lajur, ia hanya boleh dianggap sebagai tidak lengkap skrip pada masa ini, tetapi secara amnya ia boleh digunakan hanya jika pengepala jadual dibekukan), Sekarang lihat pada tangkapan skrin:

Ini mencapai pembekuan pengepala jadual dan kandungan badan jadual di bawah boleh ditatal secara bebas

Lihat kod:

Salin kod Kod adalah seperti berikut:

//Melanjutkan kaedah CloneTableHeader untuk jquery
jQuery.fn.CloneTableHeader = fungsi(tableId, tableParentDivId) {
//Dapatkan DIV di mana pengepala beku terletak, jika DIV sudah wujud, alih keluarnya
var obj = document.getElementById("tableHeaderDiv" tableId);
Jika (obj) {
jQuery(obj).remove();
}
var browserName = navigator.appName;//Dapatkan maklumat penyemak imbas, yang digunakan untuk membezakan penyemak imbas dalam kod berikutnya
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);//Dapatkan kandungan jadual
var table = tableOrg.clone();//Klon kandungan jadual
table.attr("id", "cloneTable");
//Nota: Anda perlu meletakkan pengepala untuk dibekukan ke dalam iklan
var tableHeader = jQuery(tableOrg).find("thead");
var tableHeaderHeight = tableHeader.height();
tableHeader.hide();
var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() {
          kembalikan jQuery(this).width();
});//Dapatkan lebar setiap lajur
secara dinamik var tableCloneCols = jQuery(table).find("thead tr:first td")
Jika (colsWidths.size() > 0) {//Tetapkan nilai pada lebar pengepala beku mengikut penyemak imbas (terutamanya untuk membezakan IE8)
untuk (i = 0; i Jika (i == tableCloneCols.size() - 1) {
If (browserVersion == 8.0)
                       tableCloneCols.eq(i).width(colsWidths[i] scrollWidth);
Lain                       tableCloneCols.eq(i).width(colsWidths[i]);
              } lain {
                 tableCloneCols.eq(i).width(colsWidths[i]);
            }
}
}
//Buat bekas DIV untuk pengepala beku dan tetapkan sifat
var headerDiv = document.createElement("div");
headerDiv.appendChild(jadual[0]);
jQuery(headerDiv).css("height", tableHeaderHeight);
jQuery(headerDiv).css("limpahan", "tersembunyi");
jQuery(headerDiv).css("z-index", "20");
jQuery(headerDiv).css("lebar", "100%");
jQuery(headerDiv).attr("id", "tableHeaderDiv" tableId);
jQuery(headerDiv).insertBefore(tableOrg.parent());
}

Di atas ialah kod lengkap, sekarang mari kita lihat cara menggunakannya:
Hanya tambahkan skrip berikut pada halaman

Salin kod Kod adalah seperti berikut:

Itu sahaja. Ia adalah OK untuk lulus dalam jadual dan ID DIV di mana jadual terletak Perlu diingatkan bahawa tajuk yang akan dibekukan mesti diletakkan di dalam iklan, jika tidak, pembekuan tidak boleh dicapai.

Kod di atas lulus ujian dalam IE6, 7 dan 8, tetapi FF dan Chrome akan menghadapi masalah lebar pengepala yang tidak tepat.

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.