A table component that locks the wardrobe and column headers _HTC

1, in the page to introduce a style list definition
<style>
. lockheadtable {Behavior:url (/OBLOG312/LOCKHEADTABLE.HTC)}
</style>


2, in the need to lock the row header of the table definition to add the statement "class=" Lockheadtable "" on the OK, other parameters have
rowheadnum= "Number of rows locked"
Colheadnum= "Lock number of columns"
rowheadstyle= "Row header Style"
Colheadstyle= "List Header style"
Rowstyle= "line style 1| line style 2|......| Row Style n "
Focusstyle= "The style when you get the mouse focus"

3. You can sort the data by clicking on the row headings

Attention:
Cells in row headers are not allowed to cross rows when using this component

Cases:
<table class= "lockheadtable" rowheadnum=3 colheadnum=1 rowheadstyle= "background: #F7F7F7; Color:black; " colheadstyle= "background: #F7F7F7; Color:black; " rowstyle= "background: #FFFFFF; Color:black;|background: #F7F7F7;  Color:black; " Focusstyle= "Background:green; Color:white "width=" 1500 "border=" 1 "cellpadding=" 3 "cellspacing=" 0 "align=" center ">

Source:

LOCKHEADTABLE.HTC (Component program)





<PUBLIC:COMPONENT>

<public:property name= "Rowheadnum"/>
<public:property name= "Colheadnum"/>
<public:property name= "Rowheadstyle"/>
<public:property name= "Colheadstyle"/>
<public:property name= "RowStyle"/>
<public:property name= "Focusstyle"/>

<script>
Class
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?new Array (""): Rowstyle.split ("|"));

Set row header
var i, 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 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;}
Rowitem.onmouseout = function () {this.style.cssText = "position:relative;" + arrrowstyle[(this.rowindex-rowheadnum)% Arrrowstyle.length];}
}
}

For (j=0 j<colheadnum; J+=cellitem.colspan) {
Cellitem = Rowitem.cells (j);
CellItem.style.cssText = ' position:relative; Left:expression (this.parentElement.offsetParent.scrollLeft); '
+ (i<rowheadnum? ': Colheadstyle);
}
}

Set row header sorting
For (i=0 i<rowheadnum; i++) {
Rowitem = Element.rows (i);
For (j=0 j<rowitem.cells.length; j + +) {
Cellitem = Rowitem.cells (j);
if (cellitem.rowspan==rowheadnum-i) {
CellItem.style.cursor = "Hand";
CELLITEM.SORTASC = true;
Cellitem.onclick = sorttable;
}
}
}

Sort
function sorttable () {
var objcol = event.srcelement;
if (Objcol.tagname = = "TD") {
var intcol = Objcol.cellindex;
OBJCOL.SORTASC =!OBJCOL.SORTASC;

Sort_type = ' Num ';
if (isNaN parseint (element.rows (rowheadnum) cells (intcol). innertext, 10))
Sort_type = ' ASC ';

var i,j,boltmp;
for (i = Rowheadnum i < element.rows.length; i++)
for (j = i + 1; j < Element.rows.length; J + +) {
Switch (sort_type) {
Case ' Num ':
Boltmp = (parseint (element.rows (i). Cells (Intcol). innertext, a >= parseint (Element.rows (j). Cells (Intcol). InnerText, 10));
Break
Case ' ASC ':
Default
Boltmp = (Element.rows (i). Cells (Intcol). innertext >= Element.rows (j). Cells (Intcol). innertext);
}
if ((Objcol.sortasc &&!boltmp) | | (!objcol.sortasc && boltmp)) {
Element.moverow (J, I);
}
}
}
}
</script>
</PUBLIC:COMPONENT>