phpBB España Oficial

phpBB España Oficial, Soporte Internacional Oficial del sistema de foros phpBB en Español, extensiones, estilos, traducciones, guías, tutoriales, videos, redes sociales, webmaster.
https://www.phpbb-es.com/foro/

crear tabla de ranking con bbcode

https://www.phpbb-es.com/foro/viewtopic.php?t=37300

Página 1 de 2

crear tabla de ranking con bbcode

Publicado: 26 Dic 2012, 17:44
por Animaitor
Hola a todos! Os hago una consulta para ver si podéis echarme una mano. En el foro que estoy a punto de abrir, los jugadores subirán records de diversos juegos y habrá temas dedicados a recopilar estas puntuaciones a través de rankings o tablas. He visto que hay maneras de integrar google docs y excel pero no me gusta la idea. He estado buscando maneras de implementar esto con bbcode y lo más cercano que he encontrado a lo que tengo en mente es en este enlace. Lo único que le falta es poder usar el código "list" + [*] o algo similar para que organice los puestos de primero a último sin que tenga que meterlos yo manualmente ya que me llevaría mucho tiempo. Imaginaros que en el ranking hay 30 personas y alguien sube un nuevo record máximo con lo que tendría que editar a mano las 30 casilla destinada al puesto que quedarían por debajo.

Lo que busco sería algo similar a esto:

Imagen

... en donde la columna de "Rank" se mantendría de manera automática tal y como lo hace la función "list".

Alguien tiene alguna sugerencia? Gracias de antemano.

Re: crear tabla de ranking con bbcode

Publicado: 26 Dic 2012, 19:24
por towen
Podrías subir la imagen y el contenido del enlace que pones como adjunto?? porque yo no puedo acceder a esas páginas desde mi país.

Re: crear tabla de ranking con bbcode

Publicado: 26 Dic 2012, 19:48
por Animaitor
Por supuesto, Kazekage. Te adjunto la imagen.

Re: crear tabla de ranking con bbcode

Publicado: 26 Dic 2012, 20:22
por towen
Podrías poner también el contenido del enlace que pones en el primer mensaje para entender mejor como lo quieres hacer??

Re: crear tabla de ranking con bbcode

Publicado: 27 Dic 2012, 13:00
por Animaitor
Perdona, pensé que solo tenías problemas para ver la imagen. Aclaro que el bbcode pertenece a VenomsLust.

BBCode:

Código: Seleccionar todo

[TABLE]{TEXT}[/TABLE]
HTML:

Código: Seleccionar todo

<table style="border: 1px solid grey;">
<script type="text/javascript">
   var str = '{TEXT}';
   str = str.replace(/<br \/>/g, "");
   str = str.replace(/\[/g, "<");
   str = str.replace(/\]/g, ">");
   str = str.replace(/\<td\>/g,"<td style='border: 1px solid grey;'>");
   document.write(str);
</script>
</table>
Ejemplo:

Código: Seleccionar todo

    [table]
       [tr]
          [th]Header1[/th]
          [th]Header2[/th]
          [th]Header3[/th]
          [th]Header4[/th]
       [/tr]
       [tr]
          [td]r1c1[/td]
          [td]r1c2[/td]
          [td]r1c3[/td]
          [td]r1c4[/td]
       [/tr]
       [tr]
          [td]r2c1[/td]
          [td]r2c2[/td]
          [td]r2c3[/td]
          [td]r2c4[/td]
       [/tr]
       [tr]
          [td]r3c1[/td]
          [td]r3c2[/td]
          [td]r3c3[/td]
          [td]r3c4[/td]
       [/tr]
    [/table]
Lo que me gustaría es poder generar en la primera columna los puestos de primero a último sin que tenga que meterlos yo manualmente. Pensé en usar el siguiente código:

Código: Seleccionar todo

[list=1][*][/list]
...pero no me funciona. Imagino que habría que añadir algo al bbcode pero yo de programación, 0 patatero.

Re: crear tabla de ranking con bbcode

Publicado: 30 Dic 2012, 11:41
por Animaitor
Entiendo que en estas fechas la gente se pase menos por el foro... nadie puede echarme una mano?

Re: crear tabla de ranking con bbcode  Tema Solucionado

Publicado: 01 Ene 2013, 21:01
por towen
Disculpa la demora, es que tenía problemas de conexión.
Usando ese bbcode que pones reemplaza el HTML por esto:

Código: Seleccionar todo

<table style="border: 1px solid grey;">
<script type="text/javascript">
var str = '{TEXT}';
str = str.replace(/<br \/>/g, "");
str = str.replace(/\[/g, "<");
str = str.replace(/\]/g, ">");
str = str.split('<tr>');
str[1] = '<tr><th>Pos.</th>' + str[1];
for (a = 2; a < str.length; a++)
{
str[a] = '<tr><td>' + (a-1) + '</td>'+ str[a];
}
str = str.join('')
str = str.replace(/\<td\>/g,"<td style='border: 1px solid grey;'>");
document.write(str);
</script>
</table>

Re: crear tabla de ranking con bbcode

Publicado: 01 Ene 2013, 21:05
por towen

Algún moderador que mueva este tema al foro de Dudas sobre BBCode

Re: crear tabla de ranking con bbcode

Publicado: 01 Ene 2013, 21:51
por Animaitor
Gracias Kazekage! Justo lo que estaba buscando :bravo: Feliz 2013!

Re: crear tabla de ranking con bbcode

Publicado: 02 Ene 2013, 05:44
por Carlos Murillo
Kazekage escribió:

Algún moderador que mueva este tema al foro de Dudas sobre BBCode

Listo :cerveza:

Re: crear tabla de ranking con bbcode

Publicado: 18 Ene 2013, 10:22
por Animaitor
Hola de nuevo! He conseguido un nuevo bbcode para hacer rankings y pensé que podría ponerlo en este tema y así no diversificar la información. No se quién es el autor ya que me lo han pasado de otro foro, lo siento. Visualmente es mucho mejor que el primer bbcode de arriba y sirve perfectamente para hacer listados pero no tanto para rankings ya que sufre del mismo problema que la primera versión del bbcode de antes, que la primera columna no da la posición automáticamente y sería un suplicio editar posiciones. Sería posible añadir alguna línea para que esto fuera automático como ya hizo Kazekage?

Aquí os dejo la nueva tabla.

BBcode:

Código: Seleccionar todo

[tabla]{TEXT}[/tabla]
HTML:

Código: Seleccionar todo

<script language="Javascript">
var texto = '{TEXT}';
texto = texto.replace("\r\n","");
texto = texto.replace("<br>","");
texto = texto.replace(" ","");
var linha = new Array();
linha = texto.split('R=');
var table = '<div align="center"><TABLE width=70% cellpadding=1 cellspacing=1 border=0>';
for (var i=1; i<linha.length; i++)
{
  table = table + '<TR>';
  var coluna = new Array();
  coluna = linha[i].split('&');
  for (var j=0; j<coluna.length; j++)
  {
    if (i == 1)
    {
      table = table + '<TD align=center style="background: #3097FF; font-size:11px; color:black; font-family:  Verdana,Arial, Helvetica, sans-serif;"><b>' + coluna[j].replace("amp;","") + '</b></TD>';     
    }
    else
    {
      table = table + '<TD style="background: #606060; font-size:11px; color:white; font-family:  Verdana,Arial, Helvetica, sans-serif;">' + coluna[j].replace("amp;","") + '</TD>';     
    }

  }
  table = table + '<TR>';
}
table = table + '</TABLE></div>';
document.write(table);
</script>
Ejemplo:

Código: Seleccionar todo

[tabla]R=# & Name & Score & Ship & Version
R=01 & Player 4 & 15,616,000 & Red & MAME
R=02 & Player 3 & 14,988,500 & Blue & 360
R=03 & Player 1 & 14,550,200 & Red & PCB
R=04 & Player 2 & 13,620,900 & Green & 360[/tabla]
Os recomiendo probarlo ya que queda muy bien y seguro que más de uno puede darle un buen uso. Es fácil cambiar los colores, etc. Lo que lo haría excepcional sería poder añadir la numeración automática en la primera columna... :mrgreen:

Re: crear tabla de ranking con bbcode

Publicado: 18 Ene 2013, 18:56
por towen
Usa este reemplazo HTML:

Código: Seleccionar todo

<script language="Javascript">
var texto = '{TEXT}';
texto = texto.replace("\r\n","");
texto = texto.replace("<br>","");
texto = texto.replace(" ","");
var linha = new Array();
linha = texto.split('R=');
var table = '<div align="center"><TABLE width=70% cellpadding=1 cellspacing=1 border=0>';
for (var i=1; i<linha.length; i++)
{
  table = table + '<TR>';
 
  var coluna = new Array();
  coluna = linha[i].split('&');
  for (var j=0; j<coluna.length; j++)
  {
    if (i == 1)
    {
	  if (j == 0)  { table = table + '<TD align=center style="background: #3097FF; font-size:11px; color:black; font-family:  Verdana,Arial, Helvetica, sans-serif;"><b>#</b></TD>'; }
      table = table + '<TD align=center style="background: #3097FF; font-size:11px; color:black; font-family:  Verdana,Arial, Helvetica, sans-serif;"><b>' + coluna[j].replace("amp;","") + '</b></TD>';     
    }
    else
    {
	  if (j == 0) { table = table + '<TD align=center style="background: #606060; font-size:11px; color:white; font-family:  Verdana,Arial, Helvetica, sans-serif;">' + (i-1) + '</TD>'; }
      table = table + '<TD style="background: #606060; font-size:11px; color:white; font-family:  Verdana,Arial, Helvetica, sans-serif;">' + coluna[j].replace("amp;","") + '</TD>';     
    }

  }
  table = table + '<TR>';
}
table = table + '</TABLE></div>';
document.write(table);
</script>

Re: crear tabla de ranking con bbcode

Publicado: 18 Ene 2013, 19:27
por Animaitor
Kazekage, menudo CRACK!! Mi más sincera admiración y respeto :cerveza: Ahora sí que los rankings van a ser realmente funcionales. No quiero abusar de tus conocimientos pero sería posible hacer que la primera línea (para la persona que está clasificada como N.1) fuese de un color diferente para resaltar del resto? Esto no es necesario para nada pero quedaría muy bien.

Espero que más gente encuentre este bbcode útil y lo apliquen en sus foros.

Re: crear tabla de ranking con bbcode

Publicado: 18 Ene 2013, 20:41
por towen
Un placer ayudar. Usa este reemplazo:

Código: Seleccionar todo

<script language="Javascript">
var texto = '{TEXT}';
var color = '#FF0000';
texto = texto.replace("\r\n","");
texto = texto.replace("<br>","");
texto = texto.replace(" ","");
var linha = new Array();
linha = texto.split('R=');
var table = '<div align="center"><TABLE width=70% cellpadding=1 cellspacing=1 border=0>';
for (var i=1; i<linha.length; i++)
{
  table = table + '<TR>';
 
  var coluna = new Array();
  coluna = linha[i].split('&');
  for (var j=0; j<coluna.length; j++)
  {
    if (i == 1)
    {
	  if (j == 0)  { table = table + '<TD align=center style="background: #3097FF; font-size:11px; color:black; font-family:  Verdana,Arial, Helvetica, sans-serif;"><b>#</b></TD>'; }
      table = table + '<TD align=center style="background: #3097FF; font-size:11px; color:black; font-family:  Verdana,Arial, Helvetica, sans-serif;"><b>' + coluna[j].replace("amp;","") + '</b></TD>';     
    }
    else
    {
	  color = (i == 2) ? color : '#606060';
	  if (j == 0) { table = table + '<TD align=center style="background: ' + color + ';  font-size:11px; color:white; font-family:  Verdana,Arial, Helvetica, sans-serif;">' + (i-1) + '</TD>'; }
      table = table + '<TD style="background: ' + color + ';  font-size:11px; color:white; font-family:  Verdana,Arial, Helvetica, sans-serif;">' + coluna[j].replace("amp;","") + '</TD>';     
    }

  }
  table = table + '<TR>';
}
table = table + '</TABLE></div>';
document.write(table);
</script>
Fíjate que al principio dice var color = '#FF0000';, el #FF0000 es el código del rojo, pero puedes cambiarlo por el color que desees.

Re: crear tabla de ranking con bbcode

Publicado: 18 Ene 2013, 22:28
por Animaitor
Estoy sin palabras... muchísimas gracias Kazekage! Da gusto encontrarse a gente como tu en el foro.
Todos los horarios son UTC+02:00
Página 1 de 2

Desarrollado por phpBB® Forum Software © phpBB Limited

Traducción al español por phpBB España