cambiar fondo de la celda segun su valor

erikblade9 · #1 (**permalink**) 04/05/2015, 12:55

muy buenas a todos;

espero que podais ayudarme con un problema que tengo.
El asunto es que me estoy creando un pequeño control domotico para la calefacción de mi casa y la pagina web me muestra los diferentes estados del sistema a modo de tabla.
El la web recoge los datos que le envia un arduino en formato XML los extrae y los asigna a una celda.
El tema es que quiero que esa celda cambie de color segun su valor
si es ON que el fondo se ponga verde
si es OFF que el fondo se ponga rojo

<!DOCTYPE html>
<html>
<head>

<title>CONTROL CALEFACCIÓN</title>
<script>
function GetArduinoInputs(){
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
if(this.responseXML !=null){
//extraemos los datos del XML recibido
document.getElementById("input01").innerHTML = this.responseXML.getElementsByTagName('button01')[0].childNodes[0].nodeValue;
}
}
}
}
request.open("GET", "ajax_inputs_calefa" + nocache, true);
request.send(null);
setTimeout('GetArduinoInputs()', 1000);
}

</script>
</head>
<body background="calefa1.gif" height="250" weight="250" onload="GetArduinoInputs()">
<h1 align="center">Sistema de Calefacción</h1>
<table bgcolor="White" border="2" bordercolor="Black" cellspacing="1">
<tr>
<td colspan="2" align="center"><b>Habitación 1</b></td>
<td colspan="2" align="center"><b>Habitación 2</b></td>
<td colspan="2" align="center"><b>Habitación 3</b></td>
<td colspan="2" align="center"><b>Baño 1</b></td>
<td colspan="2" align="center"><b>Baño 2</b></td>
</tr>
<tr>
<td>estado circuito</td>
<td><span id="input01">...</span></td>//ESTA ES LA CELDA QUE QUIERO QUE CAMBIE DE COLOR SEGUN SU VALOR

la pagina en cuestion es mas extensa pero creo que con esto es suficiente. He mirado por este y otros foros y he visto varios ejemplos pero a la hora de implementarlos no he conseguido nada, solo liarme mas de lo que ya estoy.
Muchas gracias

ocp001a · #2 (**permalink**) 06/05/2015, 11:08

En la parte

document.getElementById("input01").innerHTML = this.responseXML.getElementsByTagName('button01')[0].childNodes[0].nodeValue;

Debes evaluar el valor de la celda, puede ser algo así:

Código Javascript:

Ver original//colocamos el valor leído en una variable temporal
var valor= this.responseXML.getElementsByTagName('button01')[0].childNodes[0].nodeValue;
 
if(valor=='ON')//si el valor es ON
   document.getElementById("input01").style.backgroundColor='green';//cambiamos el color a verde
else
   document.getElementById("input01").style.backgroundColor='red';//si no, a rojo
 
 
document.getElementById("input01").innerHTML =valor;//colocamos el valor en la celda.