Bagaimana untuk membetulkan pengepala dalam jquery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas yang menjadikan manipulasi dinamik halaman web lebih mudah. Jadual adalah komponen biasa dalam banyak aplikasi web. Walau bagaimanapun, apabila jadual terlalu panjang, pengguna mungkin perlu menatal untuk melihat kandungan dan pengepala hilang dari bahagian atas skrin. Untuk menjadikan jadual lebih mudah digunakan, anda boleh menggunakan jQuery untuk menyematkan pengepala ke bahagian atas skrin supaya ia sentiasa kelihatan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk membetulkan pengepala.

1. Sediakan jadual

Pertama, anda perlu menyediakan dokumen HTML yang mengandungi jadual. Berikut ialah jadual contoh mudah:

姓名	电话	电子邮件
张三	1234567890	zhangsan@example.com
李四	0987654321	lisi@example.com
王五	4567891230	wangwu@example.com

2. Tambah Gaya CSS

Seterusnya, anda perlu menambah beberapa gaya CSS supaya jadual kelihatan dan berkelakuan seperti anda laman web atau aplikasi. Anda boleh menggunakan gaya berikut sebagai titik permulaan dan kemudian mengubah suainya mengikut keperluan:

jadual {
lebar: 100%;
runtuh sempadan: runtuh;
}

th , td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

th {
background -warna: #f2f2f2;
}

tbody {
ketinggian: 300px;
limpahan-y: tatal;
paparan: blok;
}

3. Dapatkan pengepala

Untuk membetulkan pengepala, anda perlu mendapatkan rujukan pengepala itu terlebih dahulu. Anda boleh menggunakan kod berikut untuk mendapatkan pengepala jadual:

var $table = $('table');
var $thead = $table.find('thead');
var $th = $thead.find('th');

4. Dapatkan badan meja

Seterusnya, anda perlu mendapatkan rujukan kepada badan jadual. Untuk memastikan pengepala jadual dan badan jadual sejajar, anda perlu menjadikan badan jadual boleh ditatal dan memaparkannya sebagai elemen peringkat blok. Anda boleh menggunakan kod berikut untuk mendapatkan badan jadual:

var $tbody = $table.find('tbody');
$tbody.css('display', 'block');
$ tbody.css('height', '300px');
$tbody.css('overflow-y', 'scroll');

5. Buat jadual baharu

Kini anda perlu mencipta jadual baharu untuk mengandungi pengepala dan badan yang diperoleh sebelum ini. Anda boleh mencipta jadual baharu menggunakan kod berikut:

var $new_table = $('f5d188ed2c074f8b944552db028f98a1');
var $new_thead = $('ae20bdd317918ca68efdc799512a9b39');
$ new_table.append($new_thead);
var $new_tr = $('a34de1251f0d9fe1e645927f19a896e8');
$new_thead.append($new_tr);

6. Salin unit pengepala Sel

Seterusnya, anda perlu menyalin setiap sel dalam pengepala jadual dan menambahnya pada baris pertama jadual baharu. Anda boleh melakukan ini menggunakan kod berikut:

$th.each(function() {
var $clone = $(this).clone();
$new_tr.append($clone );
});

7. Sisipkan jadual baharu dalam DOM

Akhir sekali, anda perlu memasukkan jadual baharu ke dalam DOM sebelum jadual asal. Anda boleh melakukan ini menggunakan kod berikut:

$new_table.insertBefore($table);

8. Pengepala jadual tetap

Sekarang anda telah mencipta Cipta jadual baharu dengan pengepala tetap dan masukkannya ke dalam DOM. Walau bagaimanapun, apabila pengguna menatal skrin, pengepala masih menatal keluar dari paparan. Untuk membetulkan pengepala, anda boleh melaraskan kedudukan pengepala berdasarkan mengimbangi tatal apabila peristiwa tatal berlaku. Anda boleh menggunakan kod berikut untuk mencapai fungsi ini:

$(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', '');

}
});

Ini kod Akan dicetuskan apabila tetingkap ditatal, dan tetapkan kedudukan pengepala kepada tetap atau statik berdasarkan offset tatal. Jika offset skrol lebih besar daripada offset di bahagian atas jadual, tetapkan pengepala kepada tetap. Jika tidak, tetapkan pengepala kepada statik.

Pada ketika ini, anda telah berjaya membetulkan pengepala. Semasa pengguna menatal, pengepala akan kekal di bahagian atas skrin dan bergerak dengan skrol. Dengan petua mudah ini, anda boleh meningkatkan kebolehgunaan dan kebolehcapaian aplikasi web anda dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk membetulkan pengepala dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!