Komponen tabel yang mengunci header baris dan kolom

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;}