Anónimo
Tabla goleadores
Saludos de nuevo!
Quería preguntarte una duda..
Tengo una web relacionada con el fútbol, en la que coloco aparte de los resultados, los goleadores.. Es decir, un tabla con los máximos goleadores.. El pichichi.
Pues bien, ahora mismo lo hago todo de manera manual, es decir, busco el nombre y le añado el gol.
Quisiera saber si existe algún código o alguna manera de poder administrar los datos(nombre jugador, equipo y goles) de manera que se muestren automáticamente ordenados, pueda buscar el nombre, me diga que ya existe.
Gracias
Quería preguntarte una duda..
Tengo una web relacionada con el fútbol, en la que coloco aparte de los resultados, los goleadores.. Es decir, un tabla con los máximos goleadores.. El pichichi.
Pues bien, ahora mismo lo hago todo de manera manual, es decir, busco el nombre y le añado el gol.
Quisiera saber si existe algún código o alguna manera de poder administrar los datos(nombre jugador, equipo y goles) de manera que se muestren automáticamente ordenados, pueda buscar el nombre, me diga que ya existe.
Gracias
1 Respuesta
Respuesta de krlosnow
1
¿Usas alguna base de datos o mantienes la página html "a pelo"? Si no usas base de datos ni ningún lenguaje de programación del lado del servidor (java, php,..), no puedes tener una administración de equipos/jugadores más allá de meterlos manualmente en el html. Lo que sí te puedo ayudar es a que te cueste menos mantener esa tabla:
<html>
<head>
<script>
var goleadores = new Array();
//Real Madrid
goleadores.push(new Goleador("Cristiano Ronaldo", "Real Madrid", 26));
goleadores.push(new Goleador("Benzemá", "Real Madrid", 10));
goleadores.push(new Goleador("Higuaín", "Real Madrid", 9));
//Barcelona
goleadores.push(new Goleador("Messi", "FC Barcelona", 27));
goleadores.push(new Goleador("Villa", "FC Barcelona", 11));
goleadores.push(new Goleador("Shakira", "FC Barcelona", 2));
//Mete así todos los jugadores de todos los equipos
function Goleador(_nombre, _equipo, _goles){
this.nombre = _nombre;
this.equipo = _equipo;
this.goles = _goles;
}
function pintaGoleadoresOrdenado(){
var MAX_ELEMENTOS = 5; //Número máximo de jugadores a pintar, para que solo saque los 5 con mas goles. Cambia este valor por el nº que quieras
var goleador;
var fila, goles;
var tabla = document.getElementById("tablaGoleadores");
var insertado;
for (ix=0; ix<goleadores.length; ix++){
goleador = goleadores[ix];
insertado = false;
for (ix2=1; ix2<tabla.rows.length; ix2++){
fila = tabla.rows[ix2];
goles = parseInt(fila.cells[2].innerHTML);
if (goleador.goles > goles){
insertaFila(tabla, goleador, ix2);
insertado = true;
break;
}
}
if (!insertado){
insertaFila(tabla, goleador);
}
if (tabla.rows.length > MAX_ELEMENTOS + 1){
tabla.deleteRow(tabla.rows.length-1);
}
}
}
function insertaFila (tabla, goleador, posicion){
var fila;
if (posicion){
tabla.insertRow(posicion);
fila = tabla.rows[ix2];
}
else{
tabla.insertRow();
fila = tabla.rows[tabla.rows.length-1];
}
fila.insertCell();
fila.insertCell();
fila.insertCell();
fila.cells[0].innerHTML = goleador.nombre;
fila.cells[1].innerHTML = goleador.equipo;
fila.cells[2].innerHTML = goleador.goles;
}
function inicio(){
pintaGoleadoresOrdenado();
}
</script>
</head>
<body onload="inicio()">
<table border="1" id="tablaGoleadores">
<tr>
<td>JUGADOR</td>
<td>EQUIPO</td>
<td>GOLES</td>
</tr>
</table>
</body>
</html>
Modifica lo que quieras para que quede bonito.
<html>
<head>
<script>
var goleadores = new Array();
//Real Madrid
goleadores.push(new Goleador("Cristiano Ronaldo", "Real Madrid", 26));
goleadores.push(new Goleador("Benzemá", "Real Madrid", 10));
goleadores.push(new Goleador("Higuaín", "Real Madrid", 9));
//Barcelona
goleadores.push(new Goleador("Messi", "FC Barcelona", 27));
goleadores.push(new Goleador("Villa", "FC Barcelona", 11));
goleadores.push(new Goleador("Shakira", "FC Barcelona", 2));
//Mete así todos los jugadores de todos los equipos
function Goleador(_nombre, _equipo, _goles){
this.nombre = _nombre;
this.equipo = _equipo;
this.goles = _goles;
}
function pintaGoleadoresOrdenado(){
var MAX_ELEMENTOS = 5; //Número máximo de jugadores a pintar, para que solo saque los 5 con mas goles. Cambia este valor por el nº que quieras
var goleador;
var fila, goles;
var tabla = document.getElementById("tablaGoleadores");
var insertado;
for (ix=0; ix<goleadores.length; ix++){
goleador = goleadores[ix];
insertado = false;
for (ix2=1; ix2<tabla.rows.length; ix2++){
fila = tabla.rows[ix2];
goles = parseInt(fila.cells[2].innerHTML);
if (goleador.goles > goles){
insertaFila(tabla, goleador, ix2);
insertado = true;
break;
}
}
if (!insertado){
insertaFila(tabla, goleador);
}
if (tabla.rows.length > MAX_ELEMENTOS + 1){
tabla.deleteRow(tabla.rows.length-1);
}
}
}
function insertaFila (tabla, goleador, posicion){
var fila;
if (posicion){
tabla.insertRow(posicion);
fila = tabla.rows[ix2];
}
else{
tabla.insertRow();
fila = tabla.rows[tabla.rows.length-1];
}
fila.insertCell();
fila.insertCell();
fila.insertCell();
fila.cells[0].innerHTML = goleador.nombre;
fila.cells[1].innerHTML = goleador.equipo;
fila.cells[2].innerHTML = goleador.goles;
}
function inicio(){
pintaGoleadoresOrdenado();
}
</script>
</head>
<body onload="inicio()">
<table border="1" id="tablaGoleadores">
<tr>
<td>JUGADOR</td>
<td>EQUIPO</td>
<td>GOLES</td>
</tr>
</table>
</body>
</html>
Modifica lo que quieras para que quede bonito.
Me gusta esta forma que me envías.. lo único que no consigo que funcione.. he colocado el código tal cual, pero tan solo me sale la tabla (jugador, equipo y goles) no encuentro el fallo, si es que lo hubiera..
Por cierto, muchas gracias por tu ayuda y tiempo..
Te paso un nuevo código, porque revisando lo que posteé me he dado cuenta que en chrome no funciona:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://tablesorter.com/jquery.tablesorter.js"></script>
<script>
var goleadores = new Array();
//Real Madrid
Goleadores. Pus(new Goleador("Cristiano Ronaldo", "Real Madrid", 26));
goleadores. Pus(new Goleador("Benzemá", "Real Madrid", 10));
goleadores. Pus(new Goleador("Higuaín", "Real Madrid", 9));
//Barcelona
Goleadores. Pus(new Goleador("Messi", "FC Barcelona", 27));
goleadores. Pus(new Goleador("Villa", "FC Barcelona", 11));
goleadores. Pus(new Goleador("Shakira", "FC Barcelona", 2));
//Mete así todos los jugadores de todos los equipos
function Goleador(_nombre, _equipo, _goles){
this.nombre = _nombre;
this.equipo = _equipo;
this.goles = _goles;
}
function pintaGoleadoresOrdenado(){
var MAX_ELEMENTOS = 5; //Número máximo de jugadores a pintar, para que solo saque los 5 con mas goles. Cambia este valor por el nº que quieras
var goleador;
for (ix=0; ix<goleadores.length; ix++){
insertaFila(goleadores[ix]);
}
var rows = $("#tablaGoleadores").find("tbody > tr").get();
rows.sort(function(a, b) {
var keyA = parseInt($(a).children('td').eq(2).text());
var keyB = parseInt($(b).children('td').eq(2).text());
if (keyA < keyB) return 1;
if (keyA > keyB) return -1;
return 0;
});
$.each(rows, function(index, row) {
$("#tablaGoleadores").children('tbody').append(row);
});
while ($("#tablaGoleadores > tbody").children().length > MAX_ELEMENTOS+1){
$("#tablaGoleadores tr:last").remove();
}
}
function insertaFila (goleador){
var fila = "<tr><td>" + goleador.nombre + "</td><td>" + goleador.equipo + "</td><td>" + goleador.goles + "</td>";
$("#tablaGoleadores > tbody:last").append(fila);
}
function inicio(){
pintaGoleadoresOrdenado();
}
</script>
</head>
<body onload="inicio()">
<table border="1" id="tablaGoleadores">
<tr>
<th>JUGADOR</th>
<th>EQUIPO</th>
<th>GOLES</th>
</tr>
</table>
</body>
</html>
Ahora uso jquery para ordenar la tabla, lo que me asegura que se va a ejecutar bien en todos los navegadores (mejor decir casi todos por si acaso...)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://tablesorter.com/jquery.tablesorter.js"></script>
<script>
var goleadores = new Array();
//Real Madrid
Goleadores. Pus(new Goleador("Cristiano Ronaldo", "Real Madrid", 26));
goleadores. Pus(new Goleador("Benzemá", "Real Madrid", 10));
goleadores. Pus(new Goleador("Higuaín", "Real Madrid", 9));
//Barcelona
Goleadores. Pus(new Goleador("Messi", "FC Barcelona", 27));
goleadores. Pus(new Goleador("Villa", "FC Barcelona", 11));
goleadores. Pus(new Goleador("Shakira", "FC Barcelona", 2));
//Mete así todos los jugadores de todos los equipos
function Goleador(_nombre, _equipo, _goles){
this.nombre = _nombre;
this.equipo = _equipo;
this.goles = _goles;
}
function pintaGoleadoresOrdenado(){
var MAX_ELEMENTOS = 5; //Número máximo de jugadores a pintar, para que solo saque los 5 con mas goles. Cambia este valor por el nº que quieras
var goleador;
for (ix=0; ix<goleadores.length; ix++){
insertaFila(goleadores[ix]);
}
var rows = $("#tablaGoleadores").find("tbody > tr").get();
rows.sort(function(a, b) {
var keyA = parseInt($(a).children('td').eq(2).text());
var keyB = parseInt($(b).children('td').eq(2).text());
if (keyA < keyB) return 1;
if (keyA > keyB) return -1;
return 0;
});
$.each(rows, function(index, row) {
$("#tablaGoleadores").children('tbody').append(row);
});
while ($("#tablaGoleadores > tbody").children().length > MAX_ELEMENTOS+1){
$("#tablaGoleadores tr:last").remove();
}
}
function insertaFila (goleador){
var fila = "<tr><td>" + goleador.nombre + "</td><td>" + goleador.equipo + "</td><td>" + goleador.goles + "</td>";
$("#tablaGoleadores > tbody:last").append(fila);
}
function inicio(){
pintaGoleadoresOrdenado();
}
</script>
</head>
<body onload="inicio()">
<table border="1" id="tablaGoleadores">
<tr>
<th>JUGADOR</th>
<th>EQUIPO</th>
<th>GOLES</th>
</tr>
</table>
</body>
</html>
Ahora uso jquery para ordenar la tabla, lo que me asegura que se va a ejecutar bien en todos los navegadores (mejor decir casi todos por si acaso...)
:S
Yo coloco este código tal cual, ¿y me tendría que salir los datos que me expones tu no? Messi, cristiano etc..
Consigo ver los datos.. tan solo me sigue saliendo la tabla de jugador-equipo-goles
Gracias
Yo coloco este código tal cual, ¿y me tendría que salir los datos que me expones tu no? Messi, cristiano etc..
Consigo ver los datos.. tan solo me sigue saliendo la tabla de jugador-equipo-goles
Gracias
Si estás usando Internet Explorer, puede que te esté bloqueando la ejecución del javascript, dando un aviso de seguridad. Debes permitir que se ejecute el contenido bloqueado. Este efecto secundario desaparece cuando subes la página a un servidor, es decir, que el IExplorer bloquea los scripts cuando se ejecutan con el protocolo "file:///c:\..."
Si quieres echa un vistazo a este enlace de Microsoft.
Si quieres echa un vistazo a este enlace de Microsoft.
Utilizo Google Chrome y Mozilla Firefox y en los dos me pasa lo mismo
¿Y has subido la página a un servidor o la ejecutas haciendo doble click sobre el html?
Lo he subido y lo que me sale es esto..te envio una captura
http://img339.imageshack.us/i/capturasy.png/
http://img339.imageshack.us/i/capturasy.png/
Acabo de ver la página colgada en http://todocanalestv.webcindario.com/
Si miras el código fuente, verás que todo el javascript te lo ha metido en una sola línea. Así no te va a funcionar en la vida, porque el código tiene comentarios, que ahora mismo están inhabilitando parte del script.
Tienes dos opciones:
1) Quita los comentarios antes de subir la página
2) Asegurate de que no meta todo el script en una sola línea.
Si miras el código fuente, verás que todo el javascript te lo ha metido en una sola línea. Así no te va a funcionar en la vida, porque el código tiene comentarios, que ahora mismo están inhabilitando parte del script.
Tienes dos opciones:
1) Quita los comentarios antes de subir la página
2) Asegurate de que no meta todo el script en una sola línea.
Ahora perfecto, me salen todos los datos..
Solo una duda más!
¿Para cambiar el color de la tabla? ¿Me baso en esto no?
<table border="1" id="tablaGoleadores">
<tr>
<th>JUGADOR</th>
<th>EQUIPO</th>
<th>GOLES</th>
</tr>
</table>
Solo una duda más!
¿Para cambiar el color de la tabla? ¿Me baso en esto no?
<table border="1" id="tablaGoleadores">
<tr>
<th>JUGADOR</th>
<th>EQUIPO</th>
<th>GOLES</th>
</tr>
</table>
Lo suyo es quitarle el borde a la tabla y aplicarle estilos, por ejemplo estos:
<style>
#tablaGoleadores tr td{
margin: 2px 2px 2px 2px;
background-color:silver;
}
#tablaGoleadores tr th{
margin: 2px 2px 2px 2px;
background-color:grey;
color:white;
}
</style>
Mete esto en el head y listo. Cambia los colores a tu gusto, por # seguido del código hexadecimal del color (componente roja + componente verde + componente azul). Ejemplos:
El rojo es #FF0000
El verde es #00FF00
El azul es #0000FF
El blanco es #FFFFFF
Hay un plugin de firefox que se llama colorzilla que te permite seleccionar un color de una página y te da el código hexadecimal.
<style>
#tablaGoleadores tr td{
margin: 2px 2px 2px 2px;
background-color:silver;
}
#tablaGoleadores tr th{
margin: 2px 2px 2px 2px;
background-color:grey;
color:white;
}
</style>
Mete esto en el head y listo. Cambia los colores a tu gusto, por # seguido del código hexadecimal del color (componente roja + componente verde + componente azul). Ejemplos:
El rojo es #FF0000
El verde es #00FF00
El azul es #0000FF
El blanco es #FFFFFF
Hay un plugin de firefox que se llama colorzilla que te permite seleccionar un color de una página y te da el código hexadecimal.