行と列のヘッダーをロックするテーブルコンポーネント

1.ページにスタイル定義を紹介します

<style>

.LockHeadTable {behavior：url（/oblog312/lockheadtable.htc）}

</style>

2。「class = "lockheadtable"」というステートメントを、行と列ヘッダーをロックする必要があるテーブル定義に追加します。その他のパラメーターには含まれます

rowheadnum = "locked row count"

colheadnum = "ロックされた列番号"

rowheadstyle = "ラインヘッドスタイル"

colheadstyle = "リストヘッダースタイル"

RowStyle = "ラインスタイル1 |ラインスタイル2 |…|ラインスタイルn"

FocusStyle = "マウスの焦点を取得したときのスタイル"

3.行のタイトルをクリックすると、データをソートできます。

知らせ：

このコンポーネントを使用する場合、列のテーブルヘッダーのセルは列を横切ることができません

例：

<tableeclass = "lockheadtable" rowheadnum = 3colheadnum = 1rowheadstyle = "background：＃f7f7f7; color：black;" colheadstyle = "colheadstyle =" background：＃f7f7f7; color：black; "rowStyle =" background：＃f7f7f7; "black;" black; "black; ：#ffffff; color：black; | background：＃f7f7f7; color：black; "focusstyle =" background：green; color：white; "width =" 1500 "border =" 1 "cellpadding =" 3 "cellpacing =" 0 "align =" center ">

ソースコード：

lockheadtable.htc（コンポーネントプログラム）

<public：component>

<public：propertyname = "Rowheadnum"/>

<public：propertyname = "colheadnum"/>

<public：propertyname = "rowheadstyle"/>

<public：propertyname = "colheadstyle"/>

<public：propertyName = "RowStyle"/>

<public：propertyName = "FocusStyle"/>

<スクリプト>

//初期化

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（ "|"））;

//行テーブルヘッダーを設定します

Vari、J、Rowitem、Cellitem;

rowhead = element.clonenode（true）;

for（i = 0; i <rowheadnum; i ++）{

rowitem = element.rows（i）;

rowitem.style.csstext = 'z-index：10; position：relative; top：expression（this.offsetparent.scrolltop）;'+rowheadstyle;

}

//リストヘッダーを設定します

for（i = 0; i <element.rows.length; i ++）{

rowitem = element.rows（i）;

if（i> = rowheadnum）{

rowitem.style.csstext = "position：relative;"+arrrowstyle [（i-rowheadnum）％arrrowstyle.length];

if（focusstyle！= null）{

rowitem.onmouseover = function（）{this.style.csstext = "position：relative;"+focusstyle;}