1. Memperkenalkan definisi gaya di halaman
<tyle>
.LockHeadtable {behavior: url (/Oblog312/lockheadtable.htc)}
</tyle>
2. Tambahkan pernyataan "class =" lockHeadtable "" ke definisi tabel yang perlu mengunci header baris dan kolom. Parameter lain termasuk
Rowheadnum = "jumlah baris terkunci"
Colheadnum = "nomor kolom terkunci"
RowHeadStyle = "Gaya Kepala Line"
Colheadstyle = "Daftar HEADER STYLE"
Rowstyle = "Gaya Line 1 | Gaya Line 2 |… | Gaya Line N"
Focusstyle = "Gaya saat Anda mendapatkan fokus mouse"
3. Saat mengklik judul baris, Anda dapat mengurutkan data.
Melihat:
Saat menggunakan komponen ini, header sel -sel dalam tabel tabel tidak diperbolehkan melintasi baris
contoh:
<tableClass = "lockHeadtable" rowheadnum = 3colheadnum = 1rowHeadstyle = "latar belakang:#f7f7f7; warna: hitam;" colheadstyle = "latar belakang:#f7f7f7; warna: hitam;" rowstyle = "latar belakang:#f7f7; warna: warna hitam;" rowstyle = "latar belakang:#f7f7; color: black;" rowstyle = "latar belakang:#f7f7; color: black;" rowstyle = "latar belakang:#f7f7; color: black;" rowstyle = "latar belakang:#f7f7; color: black;" rowstyle = "latar belakang:#f7f7; color; black;" rowstyle = "latar belakang : #FFFFFF; Warna: Hitam; | Latar Belakang:#F7F7F7; Warna: Hitam; "Focusstyle =" Latar Belakang: Hijau; Warna: Putih; "Lebar =" 1500 "Border =" 1 "Cellpadding =" 3 "CellPacing =" 0 "Align =" Center ">
Kode Sumber:
Lockheadtable.htc (program komponen)
<Publik: Komponen>
<Public: propertyname = "rowheadnum"/>
<Public: propertyname = "colheadnum"/>
<Public: propertyname = "rowheadstyle"/>
<Public: propertyname = "colheadstyle"/>
<Public: propertyname = "rowstyle"/>
<Public: propertyname = "focusstyle"/>
<script>
// Inisialisasi
Rowheadnum = (rowheadnum == null? 0: parseint (rowheadnum, 10));
Colheadnum = (colheadnum == null? 0: parseint (colheadnum, 10));
Rowheadstyle = (rowHeadStyle == null? "" ": Rowheadstyle);
Colheadstyle = (colheadstyle == null? "": Colheadstyle);
arrrowstyle = (rowstyle == null? newarray (""): rowstyle.split ("|"));
// Atur header tabel baris
vari, j, rowitem, cellitem;
rowhead = element.clonenode (true);
untuk (i = 0; i <rowheadnum; i ++) {
rowItem = element.rows (i);
rowitem.style.csStext = 'z-index: 10; Posisi: relatif; atas: ekspresi (this.offsetParent.scrolltop);'+rowHeadstyle;
}
// Atur header daftar
untuk (i = 0; i <element.rows.length; i ++) {
rowItem = element.rows (i);
if (i> = rowheadnum) {
rowitem.style.csStext = "Posisi: relatif;"+arrrrrrowstyle [(i-rowheadnum)%arrrowstyle.length];
if (focusstyle! = null) {
rowitem.onmouseOver = function () {this.style.csstext = "Posisi: relatif;"+focusstyle;}