JavaScript with scroll bar table, title fixed, with sorting function. _javascript Tips

Copy Code code as follows:

Usage Requirements:
1. Name the class of the table: Sorttablehold,
2. The form is placed in a Div, which has a overflow attribute.
3. Forms require Id,div with ID
4. To have JQuery.min.js documents
5.OK.


addevent (window, "load", sortables_init);

var Sort_column_index;

function Sortables_init () {
Find all tables with class sortable and make them sortable
if (!document.getelementsbytagname) return;
TBLs = document.getElementsByTagName ("table");
for (ti=0;ti<tbls.length;ti++) {
THISTBL = Tbls[ti];
if ((' +thistbl.classname+ '). IndexOf ("Sorttablehold")!=-1) && (thistbl.id)) {
Inittable (thistbl.id);
Ts_makesortable (THISTBL);
}
}
}

function ts_makesortable (table) {
if (table.rows && table.rows.length > 0) {
var firstrow = table.rows[0];
}
if (!firstrow) return;

We have a row:assume it's header, and make its contents clickable links
for (Var i=0;i<firstrow.cells.length;i++) {
var cell = Firstrow.cells[i];
var txt = ts_getinnertext (cell);
cell.innerhtml = ' <a href= ' # ' class= ' Sortheader ' +
' onclick= ' ts_resorttable (this, ' +i+ '); > ' +
txt+ ' <span class= ' sortarrow ' > </span></a> ';
}
if (table!=undefined)//Detach
{
$ (' <div id= ' +table.id+ ' Title ' ></div> '). InsertBefore (' # ' +table.parentnode.parentnode.id);//Create Div
var Div_title=document.getelementbyid (table.id+ ' title ');
var title = Table.clonenode (True)//all copy to Title
for (i = title.rows.length-1;i >0;i--)//To delete all the contents of title, leaving only the first line, that is, the title
Title.deleterow (i)
Table.deleterow (0)//gridview the first line (title) deleted, and only content
Div_title.appendchild (title)//title to Div
$ ("#" +div_title.id+ "Table:eq (0)"). attr ("id", div_title.id+ "1");
$ (table). Removeattr ("class");
}

}
function Ts_getinnertext (EL) {
if (typeof el = = "string") return el;
if (typeof el = = "undefined") {return el};
if (El.innertext) return el.innertext; Not needed but it is faster
var str = "";

var cs = El.childnodes;
var L = cs.length;
for (var i = 0; i < L; i++) {
Switch (cs[i].nodetype) {
Case 1://element_node
str = Ts_getinnertext (cs[i]);
Break
Case 3://text_node
str = Cs[i].nodevalue;
Break
}
}
return str;
}

function Ts_resorttable (lnk,clid) {
Get the span
var span;
for (Var ci=0;ci<lnk.childnodes.length;ci++) {//Get span in header
if (Lnk.childnodes[ci].tagname && lnk.childnodes[ci].tagname.tolowercase () = = ' span ') span = Lnk.childnodes[ci ];
}
var spantext = Ts_getinnertext (span);//title span content
var td = Lnk.parentnode;//Cell
var column = Clid | | td.cellindex;//column
var tablecurrent = getparent (TD, ' Table ');//table
var tableid=tablecurrent.id.substring (0,tablecurrent.id.length-6);
var Table=document.getelementbyid (TableID);
Work out a type for the column
if (table.rows.length <= 1) return;
var itm = Ts_getinnertext (Table.rows[0].cells[column]);
SORTFN = ts_sort_caseinsensitive;
if (Itm.match (/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = Ts_sort_date;
if (Itm.match (/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = Ts_sort_date;
if (Itm.match (/^[?) /)) sortfn = ts_sort_currency;
if (Itm.match (/^[\d\.) +$/)) sortfn = Ts_sort_numeric;
Sort_column_index = COLUMN;
var firstrow = new Array ();
var newrows = new Array ();
for (i=0;i<table.rows[0].length;i++) {firstrow[i] = table.rows[0][i];}
for (j=0;j<table.rows.length;j++) {newrows[j] = table.rows[j];}

Newrows.sort (SORTFN);

if (Span.getattribute ("sortdir") = = ' down ') {
ARROW = ' ↑ ';
Newrows.reverse ();
Span.setattribute (' Sortdir ', ' up ');
} else {
ARROW = ' ↓ ';
Span.setattribute (' Sortdir ', ' down ');
}

We appendchild rows that already exist to the tbody, so it moves them rather than creating new ones
Don ' t do sortbottom rows
for (i=0;i<newrows.length;i++)
{if (!newrows[i].classname | | (Newrows[i].classname && (newrows[i].classname.indexof (' sortbottom ') = = 1))) Table.tbodies[0].appendchild (Newrows[i]);
Do sortbottom rows
for (i=0;i<newrows.length;i++)
{if (Newrows[i].classname && (newrows[i].classname.indexof (' Sortbottom ')!=-1)) Table.tbodies[0]. AppendChild (Newrows[i]);

Delete any other arrows there may showing
var Allspans = document.getElementsByTagName ("span");
for (Var ci=0;ci<allspans.length;ci++) {
if (Allspans[ci].classname = = ' Sortarrow ') {
if (GetParent (Allspans[ci], "table") = = GetParent (lnk, "table")) {//In the same table as us?
allspans[ci].innerhtml = ';
}
}
}

span.innerhtml = ARROW;
$ (' # ' +tableid+ ' Tr:even '). CSS ("Background-color", "Fff7e8");
$ (' # ' +tableid+ ' tr:odd '). CSS ("Background-color", "#CCE8CF");
}

function GetParent (el, Ptagname) {
if (el = = null) return null;
else if (El.nodetype = = 1 && el.tagName.toLowerCase () = = Ptagname.tolowercase ())//Gecko bug, supposed to be Uppe Rcase
Return el;
Else
Return GetParent (El.parentnode, ptagname);
}
function Ts_sort_date (a,b) {
Y2K Notes:two digit years less than are treated as 20XX, greater than m are treated as 19XX
AA = Ts_getinnertext (A.cells[sort_column_index]);
bb = Ts_getinnertext (B.cells[sort_column_index]);
if (aa.length = = 10) {
DT1 = Aa.substr (6,4) +aa.substr (3,2) +aa.substr (0,2);
} else {
Yr = Aa.substr (6,2);
if (parseint (YR) <) {yr = ' +yr;} else {yr = ' ' +yr;}
DT1 = Yr+aa.substr (3,2) +aa.substr (0,2);
}
if (bb.length = = 10) {
DT2 = Bb.substr (6,4) +bb.substr (3,2) +bb.substr (0,2);
} else {
Yr = Bb.substr (6,2);
if (parseint (YR) <) {yr = ' +yr;} else {yr = ' ' +yr;}
DT2 = Yr+bb.substr (3,2) +bb.substr (0,2);
}
if (DT1==DT2) return 0;
if (DT1&LT;DT2) return-1;
return 1;
}

function Ts_sort_currency (a,b) {
AA = Ts_getinnertext (A.cells[sort_column_index]). Replace (/[^0-9.] /g, "");
bb = Ts_getinnertext (B.cells[sort_column_index]). Replace (/[^0-9.] /g, "");
return parsefloat (AA)-parsefloat (BB);
}

function Ts_sort_numeric (a,b) {
AA = parsefloat (Ts_getinnertext (A.cells[sort_column_index));
if (isNaN (aa)) AA = 0;
bb = parsefloat (Ts_getinnertext (B.cells[sort_column_index));
if (isNaN (bb)) BB = 0;
return AA-BB;
}

function Ts_sort_caseinsensitive (a,b) {
AA = Ts_getinnertext (A.cells[sort_column_index]). toLowerCase ();
bb = Ts_getinnertext (B.cells[sort_column_index]). toLowerCase ();
if (AA==BB) return 0;
if (AA&LT;BB) return-1;
return 1;
}

function Ts_sort_default (a,b) {
AA = Ts_getinnertext (A.cells[sort_column_index]);
bb = Ts_getinnertext (B.cells[sort_column_index]);
if (AA==BB) return 0;
if (AA&LT;BB) return-1;
return 1;
}


function addevent (elm, Evtype, FN, usecapture)
Addevent and Removeevent
Cross-browser event handling for ie5+, NS6 and Mozilla
by Scott Andrew
{
if (Elm.addeventlistener) {
Elm.addeventlistener (Evtype, FN, usecapture);
return true;
else if (elm.attachevent) {
var r = elm.attachevent ("On" +evtype, FN);
return R;
} else {
Alert ("Handler could not to be removed");
}
}