1. Introduce a style definition in the page
<style>
.LockHeadTable{behavior:url(/oblog312/LockHeadTable.htc)}
</style>
2. Add the statement "class="LockHeadTable"" to the table definition that needs to lock the row and column header. Other parameters include
ROWHEADNUM="Locked row count"
COLHEADNUM="Locked Column Number"
ROWHEADSTYLE="Line Head Style"
COLHEADSTYLE="List Header Style"
ROWSTYLE="Line Style 1|Line Style 2|…|Line Style n"
FOCUSSTYLE="The style when you get the focus of the mouse"
3. When clicking on the row title, you can sort the data.
Notice:
When using this component, cells in row table headers are not allowed to cross rows
example:
<tableclass="LockHeadTable"ROWHEADNUM=3COLHEADNUM=1ROWHEADSTYLE="background:#F7F7F7;color:black;"COLHEADSTYLE="background:#F7F7F7;color:black;"ROWSTYLE="background:#F7F7F7;color:black;"ROWSTYLE="background :#FFFFFF;color:black;|background:#F7F7F7;color:black;"FOCUSSTYLE="background:green;color:white;"width="1500"border="1"cellpadding="3"cellpacing="0"align="center">
source code:
LockHeadTable.htc (component program)
<PUBLIC:COMPONENT>
<PUBLIC:PROPERTYNAME="ROWHEADNUM"/>
<PUBLIC:PROPERTYNAME="COLHEADNUM"/>
<PUBLIC:PROPERTYNAME="ROWHEADSTYLE"/>
<PUBLIC:PROPERTYNAME="COLHEADSTYLE"/>
<PUBLIC:PROPERTYNAME="ROWSTYLE"/>
<PUBLIC:PROPERTYNAME="FOCUSSTYLE"/>
<script>
//initialization
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("|"));
//Set the row table header
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;
}
//Set the list header
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;}