Table components that lock row and column headers

1. Introduce a style definition in the page
<style>
.LockHeadTable {behavior:url(/oblog312/)}
</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:
<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 code:

(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>
//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?new Array(""):("|")); 

//Set the row table header
 var i, j, rowItem, cellItem;
 rowHead = (true);
 for (i=0; i<ROWHEADNUM; i++) {
  rowItem = (i);
   = 'z-index:10; position:relative; top:expression();' + ROWHEADSTYLE;
 }

//Set the list header
 for (i=0; i<; i++) {
  rowItem = (i);
  if (i>=ROWHEADNUM) {
    = "position:relative;" + arrRowStyle[(i - ROWHEADNUM) % ];
   if (FOCUSSTYLE!=null) {
     = function () {  = "position:relative;" + FOCUSSTYLE;}
     = function () {  = "position:relative;" + arrRowStyle[( - ROWHEADNUM) % ];}
   }
  }

  for (j=0; j<COLHEADNUM; j+=) {
   cellItem = (j);
    = 'position:relative; left:expression();'
    + (i<ROWHEADNUM?'':COLHEADSTYLE);
  }
 }

//Set the row title sort
 for (i=0; i<ROWHEADNUM; i++) {
  rowItem = (i);
  for (j=0; j<; j++) {
   cellItem = (j);
   if (==ROWHEADNUM-i) {
     = "hand";
     = true;
     = sortTable;
   }
  }
 }

//Sorting
 function sortTable() {
  var objCol = ;
  if ( == "TD") {
   var intCol = ;
    = !;

   sort_type = 'Num';
   if (isNaN(parseInt((ROWHEADNUM).cells(intCol).innerText, 10)))
    sort_type = 'Asc';

   var i,j,boltmp;
   for (i = ROWHEADNUM; i < ; i++)
    for (j = i + 1; j < ; j++) {
     switch (sort_type) {
     case 'Num':
      boltmp = (parseInt((i).cells(intCol).innerText, 10) >= parseInt((j).cells(intCol).innerText, 10));
      break;
     case 'Asc':
     default:
      boltmp = ((i).cells(intCol).innerText >= (j).cells(intCol).innerText);
     }
     if (( && !boltmp) || (! && boltmp)) {
      (j, i);
     }
    }
  }
 }
 </script>
</PUBLIC:COMPONENT>