crear tabla de ranking con bbcodeTema Solucionado

[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:



... 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.

[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.

[Animaitor]

Por supuesto, Kazekage. Te adjunto la imagen.

[towen]

Podrías poner también el contenido del enlace que pones en el primer mensaje para entender mejor como lo quieres hacer??

[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.

[Animaitor]

Entiendo que en estas fechas la gente se pase menos por el foro... nadie puede echarme una mano?

[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>

[towen]

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

[Animaitor]

Gracias Kazekage! Justo lo que estaba buscando Feliz 2013!

[Carlos Murillo]

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

Listo

[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...

[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>

[Animaitor]

Kazekage, menudo CRACK!! Mi más sincera admiración y respeto 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.

[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.

[Animaitor]

Estoy sin palabras... muchísimas gracias Kazekage! Da gusto encontrarse a gente como tu en el foro.