1. Gerador de função de comparação:
Copie o código do código da seguinte forma:
/**
* Gerador de função de comparação
*
* @param icol
* Número de linhas de dados
* @param sdatatype
* O tipo de dados da linha
* @retornar
*/
função generatecomparetrs (icol, sdatatype) {
Retornar Comparetrs da função (OTR1, OTR2) {
vVvalue1 = convert (otr1.cells [icol] .FirstChild.NodEvalue, sdatatype);
vVvalue2 = convert (otr2.cells [icol] .FirstChild.NodEvalue, sdatatype);
if (vVvalue1 <vVvalue2) {
retornar -1;
} else if (vVvalue1> vVvalue2) {
Retornar 1;
} outro {
Retornar 0;
}
};
}
2. Tipos de caracteres de comparação de processos:
Copie o código do código da seguinte forma:
/**
* Processe o tipo de campo classificado
*
* @param svalue
* O valor do campo padrão é o tipo de caractere, ou seja, compare os códigos ASCII
* @param sdatatype
* O tipo de campo suporta apenas os formatos de mm/dd/yyyy ou mmmm dd, AAAA (12 de janeiro de 2004)
* @retornar
*/
função convert (svalue, sdatatype) {
switch (sdatatype) {
caso "int":
retornar parseint (svalue);
Case "Float":
retornar parsefloat (svalue);
caso "data":
retornar nova data (data.parse (svalue));
padrão:
return svalue.toString ();
}
}
3. Função principal:
Copie o código do código da seguinte forma:
/**
* Classificar colunas da tabela por cabeçalho da tabela
*
* @param stableId
* ID da tabela para processar <tabela id = ''>
* @param icol
* ID da coluna de campo, por exemplo: 0 1 2 3 ...
* @param sdatatype
* O tipo de dados de campo int, float, a data é processada por padrão.
*/
função SortTable (stableId, icol, sdatatype) {
var otable = document.getElementById (stableId);
var otbody = Otable.tbodies [0];
var Coldatarows = Otbody.Rows;
var ATRS = nova matriz;
for (var i = 0; i <fsedatarows.length; i ++) {
ATRS [i] = Coldatarows [i];
}
if (otable.sortcol == icol) {
ATRS.Reverse ();
} outro {
ATRS.SORT (GeneratCompareTrs (ICOL, sdatatype));
}
var ofRagment = document.createCumentFragment ();
for (var j = 0; j <ATRS.Length; J ++) {
Ofragment.AppendChild (ATRS [J]);
}
Otbody.appendChild (Ofragment);
OTABLE.SORTCOL = ICOL;
}
Encapsula o código da pergunta acima em um arquivo JS e faça referência a ele na página HTML.
Teste test.html:
Copie o código do código da seguinte forma:
<html xmlns = "http://www.w3.org/1999/xhtml">
<title> Tabela Classificação da coluna </title>
<script type = "text/javascript" src = "js/sorttable.js"> </script>
<Body>
<tabela border = "1" id = "tblsort">
<thead style = "cor: vermelho; bgcolor: em branco">
<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> 8/8/2008 </td>
</tr>
<tr>
<Td> c </td>
<Td> 12 </td>
<Td> 1/4/2018 </td>
</tr>
</tbody>
</ tabela>
</ body>
</html>