JavaScript - Cambiar color fuente a una fila de tabla HTML según una condicion

 
Vista:
sin imagen de perfil

Cambiar color fuente a una fila de tabla HTML según una condicion

Publicado por Diego Mendoza (3 intervenciones) el 11/12/2015 21:45:47
Cordial saludo,

Tengo una pagina JSP que trae los resultados de una consulta. Pero necesito que cuando uno de esos valores no coincidan con un limite de valor, automáticamente esa fila completa se ponga en rojo. Es decir, que si uno de los valores es menor que $1000, todas las celdas de esa fila se coloquem en rojo.

Tengo la siguiente funcion pero no se como aplicarla.

1
2
3
4
5
6
7
8
9
10
11
12
function alerta() {
	var costosp = parseFloat(document.getElementById("costos"));
	var ingresosp = parseFloat(document.getElementById("ingresos"));
	var alerta =costosp*0.65;
 
	if (ingresosp>alerta){
 
		document.getElementById("consulta").style.color="#FF0000";
 
	}
 
}

Quedo atento a su ayuda.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Jordi
Val: 4
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar color fuente a una fila de tabla HTML según una condicion

Publicado por Jordi (76 intervenciones) el 12/12/2015 08:43:18
Hola Diego,

¿Cada cuando quieres que se ejecute la comprobación? Si nos pones más código quizás podamos ayudarte mejor.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Cambiar color fuente a una fila de tabla HTML según una condicion

Publicado por Diego (3 intervenciones) el 14/12/2015 13:16:12
El codigo completo es el siguiente y debe ejecutarse cuando se cargue la pagina.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script language="javascript">
 
	function alerta() {
		var costosp = parseFloat(document.getElementById("costos"));
		var ingresosp = parseFloat(document.getElementById("ingresos"));
		var alerta =costosp*0.65;
 
		if (ingresosp>alerta){
 
			document.getElementById("resconsulta").style.color="#FF0000";
		}
 
	}
</script>
</head>
<body>
<h2 align="center">REPORTE</h2>
	<h4 align="right"><a href="">Exportar PDF</a></h4>
	<div>
	<table border="1" align="center" style="font-size:13px">
		<thead>
			<tr align="center">
				<th colspan="10">COSTOS VS INGRESOS CALI</th>
			</tr>
			<tr align="center">
				<td>CENTRO COSTOS</td>
				<td>PROYECTO</td>
				<td>PRESUPUESTO</td>
				<td>VALOR TOTAL PRESUPUESTO</td>
				<td>VALOR COSTOS</td>
				<td>VALOR INGRESOS</td>
				<td>AVANCE %</td>
				<td>Gr&aacute;ficos</td>
			</tr>
 
		</thead>
			<%--Llamado a la clase ConsultaDb para asignar los valores de consulta a la tabla HTML--%>
		<%
			ConsultaDb db = new ConsultaDb();
			ArrayList Cali;
			Cali=db.vectorMostrarDatos();
			if(Cali!=null && Cali.size()>0){
			for(int c=0;c<Cali.size()-1;c++){
				db=(ConsultaDb)Cali.get(c);
			%>
 
			<tr align="center" id="resConsulta" onload="alerta('#ff0')">
 
				<td id="codcc"><%=db.getCc() %></td>
			<td><%=db.getProyecto() %></td>
 
			<%--Consulta PRESUPUESTO y formatea el numero con separador de miles y signo peso--%>
			<td id="Ppto"><% double ppto = Double.parseDouble(db.getPresupuesto());
						NumberFormat formatter1 = new DecimalFormat("###,###");
						out.println("$"+formatter1.format(ppto));
				%></td>
			<%--Consulta TOTAL PRESUPUESTO y formatea el numero con separador de miles y signo peso--%>
			<td id="TotalPres"><% double totalpres = Double.parseDouble(db.getValorTotalPres());
									NumberFormat formatter2 = new DecimalFormat("###,###");
						out.println("$"+formatter2.format(totalpres));
				%></td>
			<%--Consulta COSTOS y formatea el numero con separador de miles y signo peso--%>
			<td id="costos"><%double costosp= Double.parseDouble(db.getCostos());
							NumberFormat formatter3 = new DecimalFormat("###,###");
						out.println("$"+formatter3.format(costosp));
				%></td>
 
			<%--Consulta INGRESOS y formatea el numero con separador de miles y signo peso--%>
			<td id="ingresos"><% double ing = Double.parseDouble(db.getIngresos());
								NumberFormat formatter4 = new DecimalFormat("###,###");
						out.println("$"+formatter4.format(ing));
				%></td>
			<%--Consulta AVANCE y formatea el numero con signo %--%>
			<td id="avance"><% double porc = Double.parseDouble(db.getAvance());
			NumberFormat formatter=new DecimalFormat("#%");
						out.println(formatter.format(porc));
				%></td>
			<td><a href="">Ver Gr&aacute;fico</a></td>
			</span>
		</tr>
 
		<% }}%>
 
	</table>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jordi
Val: 4
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar color fuente a una fila de tabla HTML según una condicion

Publicado por Jordi (76 intervenciones) el 14/12/2015 21:40:26
Hola de nuevo Diego,

Si ya lo tienes! Sólo tienes que hacer que esa función se ejecute cuando cargue la página. Si no utilizas jQuery, lo mejor es asociar la función a un evento onload del body o a un window.ready.

Es decir, cambiando la etiqueta <body> te debería funcionar. Y deberías cerrarla abajo del todo.

1
<body onload="alerta()">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Cambiar color fuente a una fila de tabla HTML según una condicion

Publicado por Diego (3 intervenciones) el 14/12/2015 22:33:41
Jordi, muchas gracias por su respuesta, ya probé cargandola al evento onload en el body pero no ejecuta la acción, que otra opción puedo tener.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar