Se puede hacer esto???

kayioshin · #1 (**permalink**) 17/01/2005, 09:06

Hola, esta duda es cortita y rapida....
Tengo esta tabla :
<table width="162" border="0.5" bordercolor="#FFCC00" bgcolor="#FFCC00">
<tr bgcolor="#FFCC00">
<td width="52">Nada</td>
<td width="48">10,846.71</td>
<td width="27">17.52</td>
<td width="40">0.16%</td>
</tr>
</table>

... y quiero saber si existe alguna forma de poder cambiarle el color a los numeros de forma automatica en base a si son positivos o no.Hay que hacerlo con condicionales,pero no sé si html lo permite.
Ejemplo : Si (17.52 < 0)entonces
lo pongo con color rojo
Sino
lo pongo con color verde
Fin Si

Gracias.

Potro · #2 (**permalink**) 17/01/2005, 10:25

mmmmmmmmm pues html dudo que lo pueda hacer pero java script o alguna programación como asp o php si lo pueden hacer....

Pide ayuda en alguno de estos foros...

Suerte...

JavierB · #3 (**permalink**) 17/01/2005, 10:33

Hola kayioshin

Con una tabla como esta (no te costará mucho ponerle los estilos que quieras con Css)

<table>
<tr id="fila">
<td>Nada</td>
<td>50</td>
<td>-5</td>
<tr>
</table>

Puedes usar esta función:

Código HTML:

function color() {
  elem=document.getElementById('fila');
  elem=elem.getElementsByTagName('td');
  for(i=0;i<elem.length;i++) {
    num=parseInt(elem[i].innerHTML);
    if(!isNaN(num))
      if(num<0)
        elem[i].style.color='red';
      else
        elem[i].style.color='green';
  }
}

Espero que te sirva. Saludos,

tunait · #4 (**permalink**) 17/01/2005, 11:08

Tema trasladado al foro de javascript desde (x)html

kayioshin · #5 (**permalink**) 17/01/2005, 11:44

hola JavierB, he mirado el codigo que me pasaste, lo pense un poco y me parece que funcionaria, "pegue" la tabla y la funcion que me diste en el Dreamweaver Mx, pero cuando lo ejecuto, no aparece nada, solo esto : "Nada 50 -5"
Como tengo que ponerlo? la funcion se llama sola? es en php o javascript?
Lamento las preguntas, pero soy nuevo en esto.
Gracias.

JavierB · #6 (**permalink**) 17/01/2005, 11:57

Hola de nuevo.

La función es en JavaScript y tienes que llamarla de alguna forma.

Al cargar la página: <body onload="color()">

Desde un botón: <input type="button" value="Color" onclick="color()" />

etc.

Saludos,

kayioshin · #7 (**permalink**) 17/01/2005, 12:21

hola, funciona fenomeno para la tabla que vos me diste, pero para una mas complicada no.
Ej :
<table width="162" border="0.5" bordercolor="#FFCC00" bgcolor="#FFCC00">
<tr id = "fila" bgcolor="#FFCC00" >
<td width="52">Nada</td>
<td width="48">10,846.71</td>
<td width="27">17.52</td>
<td width="40">0.16%</td>
</tr>
</table>

Como puedo hacer???

Otra cosa, ese codigo que me pasaste, tiene cosas que no tenia idea de que existian para html, ej : ... elem=document.getElementById('fila');
elem=elem.getElementsByTagName('td');
for(i=0;i<elem.length;i++) {
num=parseInt(elem[i].innerHTML);...

Lo que esta en Dark Red es lo que no sabia que existia. Hay mas funciones como esta? donde? tenes algun manual que me explique todas estas funciones y que es lo que hace cada una? seria muy util.....

Gracias.

JavierB · #8 (**permalink**) 17/01/2005, 12:51

Rehola.

elem=document.getElementById('fila'); // asigna a la variable elem el objeto sobre el que vamos a trabajar. En esta caso es una fila.

elem=elem.getElementsByTagName('td'); // ahora en elem estarán todos los elemento con etiqueta <td> que estén dentro de la fila de la que nos ocupamos

num=parseInt(elem[i].innerHTML); // innerHTML hace referencia a lo que está dentro, en este caso de elem[i] es decir de la celda

En las FAQs de este mismo foro tienes varios manuales para consultar.

Si se me ocurre alguna forma de que funcione con la tabla tal como la tienes, vuelvo por aquí y te lo digo.

Saludos,

kayioshin · #9 (**permalink**) 18/01/2005, 06:46

hola, gracias por explicarme que eran esas lineas...
El problema de por que no funciona con mi tabla, es porque en esta linea :
elem=elem.getElementsByTagName('td'); el TAG es solo 'td', y si te fijas, en mi tabla existen otros tags , <td>..... asi que es cuestion de modificar eso para que funcione. Si se te ocurre algo mientras lo intento, será bien recibido.

De nuevo, muchas gracias.

JavierB · #10 (**permalink**) 18/01/2005, 12:28

Hoooola.

He modificado un poco la función:

Código:

function color() {
  elem=document.getElementById('fila');
  elem=elem.getElementsByTagName('td');
  for(i=0;i<elem.length;i++) {
    valor=elem[i].childNodes[0].childNodes[0];
    num=parseInt(valor.innerHTML);
    if(!isNaN(num))
      if(num<0)
        valor.style.color='red';
      else
        valor.style.color='green';
  }
}

parentNode[0] se refiera al primer nodo "hijo" dentro del nodo que estamos utilizando.

Saludos,

kayioshin · #11 (**permalink**) 18/01/2005, 12:56

holaaaa
mira, he puesto el codigo, pero no me funciona..... estás seguro que funciona para una tabla asi? :
<table width="162" border="0.5" bordercolor="#FFCC00" bgcolor="#FFCC00">
<tr id = "fila" bgcolor="#FFCC00" >
<td>Nada</td>
<td>10,8</td>
<td>17.52</td>
<td>0.16%</td>
</tr>
</table>

Saludos.

JavierB · #12 (**permalink**) 18/01/2005, 13:06

Bueno, bueno, bueno... Si me cambias la tabla a cada mensaje, esto es un sindios

kayioshin · #13 (**permalink**) 19/01/2005, 06:31

hola, perdona, pero en si, la tabla original es la del primer mensaje que mande, en base a esa es que tengo que hacer lo de los colores.
No fue mi intencion molestarte, si fue asi perdona.
Te agradeceria que pudieras seguir dandome una mano con esto.

Gracias.

JavierB · #14 (**permalink**) 19/01/2005, 06:48

Hola kayioshin

No me ha molestado nada

Pero dependiendo de como sea la tabla habrá que cambiar el código para que "busque" los números en el lugar adecuado.

Saludos,

kayioshin · #15 (**permalink**) 19/01/2005, 07:32

Bueno, la tabla es asi :

<table width="162" border="0.5" bordercolor="#FFCC00" bgcolor="#FFCC00">
<tr id = "fila" bgcolor="#FFCC00" >
<td width="52">Nada</td>
<td width="48">10,8</td>
<td width="27">17.52</td>
<td width="40">0.16%</td>
</tr>
</table>

Se te ocurre como poder hacerlo con esta tabla??

Gracias, saludos.

ToKi · #16 (**permalink**) 19/01/2005, 07:43

JavierB dijo que esta linea inclute a todos los elementos con etiqueta <td> que estan dentro de la fila de la que te ocupas:
elem=elem.getElementsByTagName('td');

si remaplazas por esta linea
elem=elem.getElementsByTagName('strong')

ya que "stong" fue la ultima etiqueta html que usaste antes de poner el texto...
la verdad que no se si te funciona se me ocurrio viendo los ejemplpos que pusieron nomas...
avisa si es que funciona...

JavierB · #17 (**permalink**) 21/01/2005, 12:28

Hola.

Con esta tabla:

<table width="162" border="0.5" bordercolor="#FFCC00" bgcolor="#FFCC00">
<tr id = "fila" bgcolor="#FFCC00" >
<td width="52">Nada</td>
<td width="48">10,8</td>
<td width="27">17.52</td>
<td width="40">0.16%</td>
</tr>
</table>

Debería funcionarte este código:

Código:

function color() {
  elem=document.getElementById('fila');
  elem=elem.getElementsByTagName('td');
  for(i=0;i<elem.length;i++) {
    valor=elem[i].childNodes[0].childNodes[0];
    num=parseInt(valor.innerHTML);
    if(!isNaN(num))
      if(num<0)
        valor.style.color='red';
      else
        valor.style.color='green';
  }
}

Si no te marcha dime en que te falla: ¿no salen bien los colores? ¿no sale ningún color? ¿etcétera?

Saludos,