1. Générateur de fonction de comparaison:
Copier le code du code comme suit:
/ **
* Générateur de fonction de comparaison
*
* @param icol
* Nombre de lignes de données
* @param sdatatype
* Le type de données de la ligne
* @retour
* /
Fonction GenerateCompareTrS (icol, sdatatype) {
Return Fonction Comparètes (OTR1, OTR2) {
vValue1 = convert (otr1.cells [icol] .firstchild.nodevalue, sdatatype);
vValue2 = convert (otr2.cells [icol] .firstchild.nodevalue, sdatatype);
if (vValue1 <vValue2) {
retour -1;
} else if (vValue1> vValue2) {
Retour 1;
} autre {
Retour 0;
}
};
}
2. Types de caractères de comparaison de processus:
Copier le code du code comme suit:
/ **
* Traitez le type de champ trié
*
* @param svalue
* La valeur du champ par défaut est le type de caractère, c'est-à-dire comparer les codes ASCII
* @param sdatatype
* Le type de champ ne prend en charge que les formats de mm / dd / yyyy ou mmmm dd, yyyyy (12 janvier 2004)
* @retour
* /
fonction convert (svalue, sdatatype) {
commutateur (sdatatype) {
cas "int":
RETOUR PARSEINT (SVALUE);
cas "float":
retour parsefloat (svalue);
cas "Date":
retourner la nouvelle date (date.parse (svalue));
défaut:
return svalue.toString ();
}
}
3. Fonction principale:
Copier le code du code comme suit:
/ **
* Trier les colonnes de table par en-tête de table
*
* @param stableid
* Table ID pour traiter <Table ID = ''>
* @param icol
* ID de colonne de champ par exemple: 0 1 2 3 ...
* @param sdatatype
* Le type de données de champ int, float, la date est traité par défaut.
* /
fonction sortable (stableId, icol, sdatatype) {
var otable = document.getElementById (stableId);
var otbody = otable.tbodies [0];
var Coldatarows = OtBody.Rows;
var atrs = nouveau tableau;
pour (var i = 0; i <condatarows.length; i ++) {
ATRS [I] = Coldatarows [i];
}
if (Otable.SortCol == icol) {
ATRS.Reverse ();
} autre {
ATR.SORT (GenerateCompareTrS (icol, sdatatype));
}
var ofragment = document.CreateDocumentFragment ();
pour (var j = 0; j <at.length; j ++) {
Ofragment.ApendChild (ATRS [J]);
}
Otbody.ApendChild (Ofragment);
OTABLE.SORTCOL = ICOL;
}
Encapsuler le code de question ci-dessus dans un fichier JS et le référer dans la page HTML.
Test test.html:
Copier le code du code comme suit:
<html xmlns = "http://www.w3.org/1999/xhtml">
<Title> Table Colonne Sort </TITME>
<script type = "text / javascript" src = "js / sorttable.js"> </ script>
<body>
<table border = "1" id = "tblsort">
<thead Style = "Color: Red; Bgcolor: Blank">
<tr>
<th onclick = "sorttable ('tblsort', 0);"
<th onclick = "sorttable ('tblsort', 1, 'int');"
<th onclick = "sorttable ('tblsort', 2, 'date');"
</tr>
</thEad>
<tbody>
<tr>
<td> a </td>
<td> 1 </td>
<TD> 5/9/2008 </td>
</tr>
<tr>
<td> b </td>
<td> 3 </td>
<TD> 6/9/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>
</docy>
</html>