Bagaimana untuk Mencipta Jadual Boleh Tatal dengan Baris dan Lajur Pertama Terkunci dalam JavaScript?

Susan Sarandon
Lepaskan: 2024-11-01 23:57:29
asal
398 orang telah melayarinya

How to Create a Scrollable Table with Locked First Row and Column in JavaScript?

Mengunci Baris Pertama dan Lajur Pertama dalam Jadual Boleh Tatal

Dalam pertanyaan ini, pengguna bertujuan untuk mencipta jadual dengan baris pertama dan lajur pertama dikunci, serupa dengan ciri "tetingkap beku" dalam Excel. Jadual harus membenarkan penatalan mendatar dan menegak.

Untuk mencapai ini, CSS sahaja mungkin tidak mencukupi, yang membawa kepada penerokaan penyelesaian JavaScript. Satu penyelesaian yang disyorkan ialah pemalam JavaScript yang dipanggil "fixed-table-rows-cols".

Fixed-Table-Rows-Cols Plugin

Pemalam ini mengubah jadual HTML yang diformatkan menjadi jadual boleh tatal dengan pengepala dan lajur jadual tetap. Ia membolehkan penguncian baris dan lajur pertama.

Penggunaan:

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       // Number of fixed columns
    width        : "100%",  // Width of the container
    height       : 500      // Height of the container
});
Salin selepas log masuk

Faedah:

  • Membenarkan penguncian lajur dan pengepala yang fleksibel
  • Menyokong pelbagai saiz jadual
  • Berfungsi merentas pelayar web utama

Untuk mendapatkan maklumat lanjut dan demo langsung, lawati GitHub pemalam repositori: https://github.com/meetselva/fixed-table-rows-cols

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Jadual Boleh Tatal dengan Baris dan Lajur Pertama Terkunci dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!