1. Generador de funciones de comparación:
Copiar código del código de la siguiente manera:
/**
* Generador de funciones de comparación
*
* @param icol
* Número de filas de datos
* @param sdatatype
* El tipo de datos de la fila
* @devolver
*/
function GenerAtecomParetrs (icol, sdatatype) {
Comparación de funciones de retorno (OTR1, OTR2) {
vValue1 = Convert (OTR1.Cells [icol] .FirstChild.NodeValue, SDATATYPE);
vValue2 = convert (OTR2.Cells [icol] .FirstChild.NodeValue, SDATATYPE);
if (vValue1 <vValue2) {
regreso -1;
} else if (vValue1> vValue2) {
Regresar 1;
} demás {
Regresar 0;
}
};
}
2. Tipos de caracteres de comparación de procesos:
Copiar código del código de la siguiente manera:
/**
* Procesar el tipo de campo ordenado
*
* @param svalue
* El valor de campo predeterminado al tipo de caracteres, es decir, compare los códigos ASCII
* @param sdatatype
* El tipo de campo solo admite los formatos de mm/dd/aaa y mmmm dd, aaa yyyy (12 de enero de 2004)
* @devolver
*/
function convvert (svalue, sdatatype) {
Switch (Sdatatype) {
Caso "int":
return parseint (svalue);
Caso "Flotar":
return parsefloat (svalue);
Caso "Fecha":
devolver una nueva fecha (fecha.Parse (svalue));
por defecto:
return sValue.ToString ();
}
}
3. Función principal:
Copiar código del código de la siguiente manera:
/**
* Ordenar columnas de tabla por encabezado de tabla
*
* @param stableid
* ID de tabla para procesar <table id = ''>
* @param icol
* ID de columna de campo EG: 0 1 2 3 ...
* @param sdatatype
* El tipo de datos de campo int, float, fecha se procesa de forma predeterminada.
*/
función sorttable (stableid, icol, sdatatype) {
var otable = document.getElementById (stableID);
var otbody = otable.tbodies [0];
var frillatarws = otbody.rows;
var atrs = nueva matriz;
para (var i = 0; i <frhirtatarows.length; i ++) {
ATRS [i] = Coldatarows [i];
}
if (otable.sortcol == icol) {
atrs.reverse ();
} demás {
atrs.sort (generateComParetrs (icol, sdatatype));
}
var ofRagment = document.CreateDocumentFragment ();
para (var j = 0; j <atrs.length; j ++) {
ofRagment.AppendChild (ATRS [J]);
}
otbody.appendChild (Ofragment);
otable.sortCol = icol;
}
Encapsule el código de preguntas anterior en un archivo JS y haga referencia en la página HTML.
Test Test.html:
Copiar código del código de la siguiente manera:
<html xmlns = "http://www.w3.org/1999/xhtml">
<title> sort de columna de tabla </title>
<script type = "text/javaScript" src = "js/sorttable.js"> </script>
<Body>
<table border = "1" id = "tblsort">
<thead style = "color: rojo; bgcolor: en blanco">
<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>
</body>
</ html>