<script language="JavaScript" type="text/javascript">
var nombreTabla = "Personas::Edades";
// array nombres de los campos
var campos = ['Nombre','Apellido','Edad'];
// array multidimensional con los registros
var registros = [
['jose','lopez','45'],
['ramon','mera','15'],
['angeles','varela','42'],
['miguel','carril','45'],
['mar','mera','39']
];
var numRegistros = registros.length;
var numCampos = campos.length;
var tablaOrdenada = new Array(numRegistros);
//función ordenaTabla
// campOrden: número que indica el campo elegido para ordenar;
// si campOrden = -1 los registros no se ordenan.
// tipoOrden puede ser 'asc' (ascendente) o 'desc' (descendente)
function ordenaTabla(campOrden,tipoOrden){
// no ordenado
if (campOrden == -1){
for(i = 0; i<numRegistros;i++){
tablaOrdenada[i] = i;
}
}
// ordenado
else{
var aux = new Array();
var j = 0;
for(j;j<numRegistros;j++){
aux[j] = registros[j][campOrden] + "::" + j;
}
var auxOrdenada = aux.sort();
if (tipoOrden == "desc"){
auxOrdenada = auxOrdenada.reverse();
}
for (t = 0 ; t<numRegistros;t++){
x = auxOrdenada[t].split("::");
auxOrdenada[t] = x[1];
}
tablaOrdenada = auxOrdenada;
}
representaTabla(campOrden,tipoOrden);
}
// función representar los datos ordenados en tabla
// TABLA CON LOS DATOS
function representaTabla(campOrden,tipoOrden){
var textoTabla = "";
var indice = "";
textoTabla +='<table border="1" cellpadding="10">';
// añadimos el nombre de la tabla
textoTabla += "<caption>Nombre de la Tabla: <b>" + nombreTabla + "</b></caption>";
// cabecera de la tabla: añadimos los nombres de los campos
textoTabla +='<tr>';
for(w=0;w<numCampos;w++){
textoTabla += '<td align="center"><b>' + campos[w] + '</b></td>';
}
textoTabla +='</tr>';
// cuerpo de la tabla con los datos
for (i = 0;i<numRegistros;i++){
indice = tablaOrdenada[i];
// fila
textoTabla +='<tr>';
// columna
for (z=0;z<numCampos;z++){
textoTabla +=' <td>(' + indice + ","+ z + ") =>" + registros[indice][z] + '</td>';
}
textoTabla +='</tr>';
}
// pie de la tabla: añadimos los enlaces para ordenar
textoTabla +='<tr>';
for(w=0;w<numCampos;w++){
textoTabla += '<td align="center"><a href="javascript:ordenaTabla('+w+',\'asc\')">';
textoTabla += '<img src="ir2.gif" border="0" alt="Ordena ASCENDENTEMENTE">';
textoTabla += '</a> <a href="javascript:ordenaTabla('+w+',\'desc\')">';
textoTabla += '<img src="ir1.gif" border="0" alt="Ordena DESCENDENTEMENTE">';
textoTabla += '</a></td>';
}
textoTabla +='</tr>';
textoTabla +='</table>';
// añadimos un resumen.
textoTabla +='<p>Información:<ul>';
textoTabla +='<li>Número de Campos => <b>' + numCampos + '</b></li>';
textoTabla +='<li>Número de Campos => <b>' + numRegistros + '</b></li>';
if (campOrden == -1){
textoTabla +='<li><b>No ordenada [Posición original]</p></li>';
}else{
textoTabla +='<li>Orden segun => <b>' + campos[campOrden] + " [" + tipoOrden + ']</b></li>';
textoTabla +='<li><a href="javascript:ordenaTabla(-1)">Posición inicial [Reiniciar]</a></li>';
}
textoTabla +='</ul></p>';
// escribimos en la página
document.getElementById("tabla").innerHTML = textoTabla;
}
</script>
En el lugar donde usted haya elegido para que se escriba la tabla dinámica escriba los siguiente:
