> Faqs > Cambiar color de fondo de body o de tabla
Esta Faq no ha sido aprovada por el equipo de moderadores de DesarrolloWeb.com por no seguir las normas de publicación de preguntas.

Cambiar color de fondo de body o de tabla

No soy experto en programación por el cual les consulto lo siguiente. He desarrollado una pagina HTML, la cual cargo en el webserver de un PLC, para tomar datos y mostrar en la página.

Por medio de la expresion :="webdata".VARIABLE: tomo los datos que necesito (esta expresión es definida por el fabricante). Al principio actualizaba la pagina con <meta http-equiv="refresh" content="1"> , si bien parpadeaba, me permitía mediante una función que cargaba en el BODY, con onload=2funcioncolor()" actualizar el fondo de la página de rojo a negro en función del estado de una variable.

Para evitar que parpadee toda la pagina ya que actalizaba los valores de una tabla, empece a utilizar "div".

Pero ahora no puedo cambiar el color de fondo sin actualizar toda la página, pero esto me genera que parpadee de nuevo la pantalla. Si pudiera cambiar el color de fondo de la Table también me serviría pero no me funciono tampoco.

Adjunto código.

<head>
    <title>PANTALLA</title>

    <script src="jquery.js"></script>
    <script>
        $(document).ready(
         function() {
         setInterval(function() {
            $('#refresh').load(location.href + ' #time');
        }, 1000);  //Delay 1 segundo
        });
    </script>


    <script>
        function cambiarColor(){
            var valor=:="webdata".COLOR:;   //ACÁ TOMO EL DATO PARA CAMBIAR EL COLOR

            if (valor == '1') {
                document.body.style.background ='red';  //colorCambiado
            } else {
                document.body.style.background ='black';    //colorNormal
            }}
    </script>
</head>


<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg .tg-C1FX{font-family:FreeSans;font-weight:bold;font-size:140px;color:#32cb00;}
.tg .tg-C2FX{font-family:FreeSans;font-weight:bold;font-size:100px;color:#ffffff;}
.tg .tg-C3FX{font-family:FreeSans;font-weight:bold;font-size:140px;color:#32cb00;}
.tg .tg-C4FX{font-family:FreeSans;font-weight:bold;font-size:100px;color:#32cb00;}
.tg .tg-C1FY{font-family:FreeSans;font-weight:bold;font-size:210px;color:#ffffff;}
.tg .tg-C2FY{font-family:FreeSans;font-weight:bold;font-size:110px;color:#ffffff;}
.tg .tg-C3FY{font-family:FreeSans;font-weight:bold;font-size:210px;color:#ffffff;}
.tg .tg-C4FY{font-family:FreeSans;font-weight:bold;font-size:110px;color:#ffffff;}

</style>

    <body onload="cambiarColor()">
        <div id="refresh">
            <div id="time">



            <table  width="100%" class="tg">

                <tr>
                    <td class="tg-C1FX" colspan="2">VELOCIDAD</td>
                        <td align="right" class="tg-C3FX" colspan="2">GRAMAJE</td>
                </tr>
                <tr>
                        <td align="center" class="tg-C1FY">:="webdata".VEL:</td>
                        <td align="left" class="tg-C2FY">m/min</td>
                        <td align="right" class="tg-C3FY">:="webdata".GRAMAJE:</td>
                        <td align="right" class="tg-C4FY">g/m2</td>
                </tr>

            </table>
            </div>
        </div>
    </body>

Respuestas

Si quieres evitar que parpadee toda la pantalla tienes que usar Ajax, cargando solamente un código que te permita saber el valor ese que quieres recibir. Pero no sé si lo permitirá el sistema de PLC que estás usando para obtener ese valor.

Dado que estás usando una tecnología muy propietaria de tu PLC, es complicado darte una respuesta sobre cómo tendrías que montarlo. Ese código que mencionas :="webdata".VARIABLE: no lo he visto nunca y no se parece a ningún lenguaje del servidor que conozco.

Si pudieras aislar un archivo que solo tuviera ese código, lo podrías traer por Ajax. Ya veo que que usas jQuery en tu código, y que estás usando las funciones de Ajax. Te recomiendo que las estudies con calma para entender lo que estás haciendo. Está todo explicado en el manual de jQuery.

Pero lo que tendrás que cambiar de tu código es la parte que haces el load, porque eso cambia prácticamente todo el contenido de tu página, por eso parpadea. Tienes que usar las funciones de Ajax como $.get() que te permite traer solo un dato y luego actualizar con ese dato la parte de la página que necesites.

Lo que respecta a cambiar el estilo del body o de la tabla es muy sencillo.

Parece que en el caso de cambiar el body lo estás haciendo bien. Para cambiar el fondo de la tabla con Javascript lo ideal es que uses un identificador en la tabla:

<table id="mitabla">

Y luego te refieras a ella mediante ese ID, para cambiar el color con Javascript usando algo como esto:

document.getElementById("mitabla").style.background = "red";

Pero de todos modos, ya que estás usando jQuery, puedes usar el método css() que proporciona jQuery, que facilita bastante las cosas.

Miguel Angel
3090 138 206 17