cambiar el color de un numero dentro de una celda a partir de un rango con javascript

hcbosch · #1 (**permalink**) 14/04/2011, 08:41

Hola a todos:
Tengo una tabla en php, en cada celda un número resultado de una consulta. Necesito a partir de un umbral determinado cambiar el color de ese numero.
Me han comentado que es facil hacerlo con javscript pero no he logrado conforamr una funcion que me haga esto.
Alguien puede ayudarme?

Perr0 · #2 (**permalink**) 14/04/2011, 09:12

en la celda,especificamente en los td

Código HTML:

Ver original<td onclick="this.style.color='red'">4</td>

salu2

hcbosch · #3 (**permalink**) 14/04/2011, 09:24

NO es el onclick.
Yo solo necesito una funcion javascript que me cambie el color del numero para en mi tabla hacer un if y si se cumple la condicion llamar la funcion javascript

laratik · #4 (**permalink**) 14/04/2011, 09:24

Si entiendo bien lo que quieres es que cambien de colores los números de m hasta M (rango especificado por tí) que hallan sido extraídos de la base de datos, seria algo como lo siguiente:

Código HTML:

<html>
<head>
<script type="text/javascript">
function cargar() {
	var celdas = document.getElementById("target").getElementsByTagName("td");
	for(var i=0; i<celdas.length; i++) {
		if(celdas.item(i).textContent >=3 && celdas.item(i).textContent <=8) {
			celdas.item(i).style.color = "#F00";
		}
	}
}

window.onload = cargar;
</script>
</head>
<body>

<table id="target">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
</table>

</body>
</html>

hcbosch · #5 (**permalink**) 14/04/2011, 09:42

NO, no me explico bien.
Lo que contiene mi celda son números y necesito que se me pongan en rojo los que sean mayores de 80. Pero esta condicion yo la pongo en php en la celda. Solo necesito la funcion javascript que me pueda cambiar el color.

laratik · #6 (**permalink**) 14/04/2011, 10:09

Cita:

Iniciado por hcbosch

NO, no me explico bien.
Lo que contiene mi celda son números y necesito que se me pongan en rojo los que sean mayores de 80. Pero esta condicion yo la pongo en php en la celda. Solo necesito la funcion javascript que me pueda cambiar el color.

Y eso es exactamente lo que hace el script que te acabo de pasar, solo deberas cambiar:

if(celdas.item(i).textContent >=3 && celdas.item(i).textContent <=8)

por

if(celdas.item(i).textContent >80)

Claro que si quieres puedes manejarlo completamente en PHP (en cuyo caso esta mal ubicado el post) de la siguiente manera:

Código PHP:

 
<table> 
<tr> 
<?php 
for($i=0; $i<sizeof($dat); $i++) { 
    if($dat[$i]>80){ 
        echo "<td style='color:#F00'>$dat[$i]</td>"; 
    } else { 
        echo "<td>$dat[$i]</td>"; 
    } 
} 
?> 
</tr> 
</table>

hcbosch · #7 (**permalink**) 14/04/2011, 10:57

Insisto en que no nos entendemos. Yo ya tengo una solucion en phq que no me convence del todo y es esta:
<?php if ($a>$arreglo_plan[1])echo (a); else echo "<td style='color:red;' font-family: Verdana, Arial, Helvetica, sans-serif; align='center' >$a</td>";?>

No me convence pq este es el codigo que tengo dentro de la celda, me cambia el tipo de letra y quiero buscar una solucion mejor en javascript.
La solucion que pense en javacript seria hacer una funcion que me cambe el color de la celda y yo la llame desde php.
PAra eso no necesito el ciclo que me pones en tu solución, o no lo entiendo.

laratik · #8 (**permalink**) 14/04/2011, 12:00

creeme que le doy vuelta y vueltas al post y lo que entiendo es que quieres cambiar mediante javascript los colores de los numeros que sean mayores a 80 ¿ya probaste el javascript que postee?

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
function cargar() {
    var celdas = document.getElementById("target").getElementsByTagName("td");
    for(var i=0; i<celdas.length; i++) {
        if(celdas.item(i).textContent >80) {
            celdas.item(i).style.color = "#F00";
        }
    }
}
 
window.onload = cargar;
</script>

lo que dices de:

Cita:

solo necesito una funcion javascript que me cambie el color del numero para en mi tabla hacer un if y si se cumple la condicion llamar la funcion javascript

No lo veo muy viable:

1. ¿Con que evento vas a disparar el javascript?
2. Para cambiar el color de un elemento mediante javascript se hace .style.color = "red"; que es el equivalente a colocar el atributo style directamente sobre el elemento.

Acerca del for que dices, solo estoy simulando el recorrido que debes hacer para sacar los datos de una base de datos y en mi primer post solo colocaba una tabla con numeros para realizar el mismo efecto. Espero que sea lo que buscas, en caso contrario... definitivamente no estamos conectados

. SALUDOS.

cesar090 · #9 (**permalink**) 04/11/2013, 11:17

Cita:

Iniciado por laratik

Y eso es exactamente lo que hace el script que te acabo de pasar, solo deberas cambiar:

if(celdas.item(i).textContent >=3 && celdas.item(i).textContent <=8)

por

if(celdas.item(i).textContent >80)

Claro que si quieres puedes manejarlo completamente en PHP (en cuyo caso esta mal ubicado el post) de la siguiente manera:

Código PHP:

 
<table> 
<tr> 
<?php 
for($i=0; $i<sizeof($dat); $i++) { 
    if($dat[$i]>80){ 
        echo "<td style='color:#F00'>$dat[$i]</td>"; 
    } else { 
        echo "<td>$dat[$i]</td>"; 
    } 
} 
?> 
</tr> 
</table>

Y si lo que quiero cambiar es el relleno de la celda nadamas, por que comando cambiaria el textContent o como seria el codigo?

marlanga · #10 (**permalink**) 04/11/2013, 11:40

Aunque este tipo pedía un script de javascript, en realidad esto debe hacerse desde el lenguaje de servidor que dibuje los datos en formato HTML, por ejemplo, PHP.

Se hace simplemente, como dice el mensaje que citas, mirando el valor del dato a escribir en por ejemplo un <TD> y mediante estilos CSS, dándole color a la fuente, con un "color", o dándole color al fondo de todo el <TD>, con "background-color".

PIRRUMAN · #11 (**permalink**) 04/11/2013, 11:52

el color se debe cambiar desde que esta formando su tabla es decir algo asi :

Código PHP:

Ver originalwhile(condicion)
{
$estilo="";
if($numero >80)
{
$estilo='style="background:green"';
}
<tr><td <?php echo $estilo; ?>><?php echo $numero;?></td></tr>
}