1. Vergleichsfunktionsgenerator:
Kopieren Sie den Code -Code wie folgt:
/**
* Vergleichsfunktionsgenerator
*
* @param iCol
* Anzahl der Datenreihen
* @param sdatatype
* Der Datentyp der Zeile
* @zurückkehren
*/
FunktionsgenerateComparetrs (ICOL, SDatatype) {
Rückgabefunktion Vergleiche (OTR1, OTR2) {
vValue1 = convert (otr1.cells [icol].
vValue2 = convert (otr2.cells [icol] .Firstchild.nodeValue, sDatatype);
if (vValue1 <vValue2) {
Return -1;
} else if (vValue1> vValue2) {
Rückkehr 1;
} anders {
Rückkehr 0;
}
};
}
2. Prozessvergleichscharaktertypen:
Kopieren Sie den Code -Code wie folgt:
/**
* Verarbeiten Sie den sortierten Feldtyp
*
* @param SValue
* Der Feldwert standardmäßig zum Zeichentyp, dh, vergleichen Sie ASCII -Codes
* @param sdatatype
* Der Feldtyp unterstützt nur die Formate von MM/DD/JJJJ oder MMMM DD, YYYYY (12. Januar 2004)
* @zurückkehren
*/
Funktionskonvertit (SVALUE, SDATAType) {
Switch (sdatatype) {
Fall "int":
Return ParseinT (SValue);
Fall "Float":
Return Parsefloat (SValue);
Fall "Datum":
Neues Datum zurückgeben (Datum.Parse (SValue));
Standard:
return sValue.toString ();
}
}
3. Hauptfunktion:
Kopieren Sie den Code -Code wie folgt:
/**
* Die Tabellenspalten nach Tabellenheader sortieren
*
* @param StableId
* Tabellen -ID zu verarbeiten <table id = ''>
* @param iCol
* Feldspalten -ID zB: 0 1 2 3 ...
* @param sdatatype
* Der Felddatentyp int, float, Datum wird standardmäßig verarbeitet.
*/
FunktionsartTable (StableId, ICOL, sDatatype) {
var otable = document.getElementById (StableId);
var otbody = otable.tbodies [0];
var coldatarows = otbody.rows;
var aTRS = New Array;
für (var i = 0; i <coldatarows.length; i ++) {
ATRs [i] = Coldatarows [i];
}
if (otable.sortcol == icol) {
ATRS.Reverse ();
} anders {
ATRS.SORT (GenerateComparetrs (ICOL, SDatatype));
}
var Ofgragment = document.createdocumentFragment ();
für (var j = 0; j <atr.length; j ++) {
Ofgragment.AppendChild (ATRs [j]);
}
otbody.AppendChild (optimal);
OTABLE.SORTCOL = ICOL;
}
In eine JS -Datei in eine JS -Datei einkapseln und auf der HTML -Seite verweisen.
Test test.html:
Kopieren Sie den Code -Code wie folgt:
<html xmlns = "http://www.w3.org/1999/xhtml">
<title> Tabellenspalte Sortierung </ title>
<script type = "text/javaScript" src = "js/sorttable.js"> </script>
<body>
<table border = "1" id = "tblsort">
<thead style = "color: rot; bgcolor: leer">
<tr>
<th Onclick = "SortTable ('Tblsort', 0);
<th Onclick = "SortTable ('Tblsort', 1, 'int');
<th Onclick = "SortTable ('Tblsort', 2, 'Datum');
</ tr>
</ thead>
<tbody>
<tr>
<td> a </ td>
<td> 1 </ td>
<td> 09.05.2008 </td>
</ tr>
<tr>
<td> b </ td>
<td> 3 </ td>
<td> 09.06.2008 </td>
</ tr>
<tr>
<td> d </ td>
<td> 6 </ td>
<td> 5/4/2008 </td>
</ tr>
<tr>
<td> e </ td>
<td> -5 </ td>
<td> 5/4/2007 </td>
</ tr>
<tr>
<td> h </ td>
<td> 34 </ td>
<td> 5/8/2008 </td>
</ tr>
<tr>
<td> c </ td>
<td> 12 </ td>
<td> 1/4/2018 </td>
</ tr>
</ tbody>
</ table>
</ body>
</ html>