2

vuelvo una vez mas a ustedes con este detalle que tengo en el codigo javascript que no puedo resolver y quisiera que me ayudaran una vez mas por favor.

El detalle que tengo es que tengo este código JavaScript el cual me trabaja bien hasta cierto punto donde comparo unos valores y cambia de color unas celdas dependiendo del valor que se haya ingresado y en el input.

Lo malo que al comparar el valor se cambia de color la celda pero cuando cambio de valor ósea entra en otro rango cambia de color la otra celda y se queda pasmada el color anterior, lo que quiero es que cambie de color la celda correspondiente y si no entra en ese rango se quite ese color anterior y se quede el que es.

introducir la descripción de la imagen aquí

así queda al momento de teclear un valor y cambiar de color al rango que entra y si cambia se pasma.

function inp1(elemento){
            if ($(elemento).val() <= 0.51) {
                document.getElementById("celda1").style.backgroundColor = "#55efc4";
                document.getElementById("celda1").style.color = "#2d3436";
                document.getElementById("celda2").style.backgroundColor = "#55efc4";
                document.getElementById("celda2").style.color = "#2d3436";
            }
            if ($(elemento).val() >= 0.51 && $(elemento).val() <= 1.00) {
                document.getElementById("celda3").style.backgroundColor = "#e17055";
                document.getElementById("celda3").style.color = "white";
                document.getElementById("celda4").style.backgroundColor = "#e17055";
                document.getElementById("celda4").style.color = "white";
            }
            if ($(elemento).val() > 1.00) {   
                $(elemento).css("font-weight", "bold");
                $(elemento).css("font-size", "13.5px");
                document.getElementById("celda5").style.backgroundColor = "#ff7675";
                document.getElementById("celda5").style.color = "white";
                document.getElementById("celda6").style.backgroundColor = "#ff7675";
                document.getElementById("celda6").style.color = "white";
                //document.getElementById("celda1").placeholder = "normal";
            }
            else {
                $(elemento).css("font-weight", "");
                $(elemento).css("font-size", "13.5px");
            }
        }

mi tabla html

<tr>
                            <td align="left" style="font-size:16px;">Ac. anti Herpes simple II IgG</td>
                            <td align="center"><input class="form-control inp1-selector" type="text" name="hv2g" id="hv2g" onkeyup="inp1(this)" oninput="inp1()" placeholder="HV2G" style="text-align:center; width:70%;" onkeypress="return numeros(event)" value="<?php echo $resul2["hv2g"]; ?>"></td>
                            <td align="center" style="font-size:16px;">COI</td>
                            <td align="right" style="font-size:16px;" id="celda1">No reactivo</td>
                            <td align="center" style="font-size:16px;" id="celda2">0.0 - 0.51</td>
                        </tr>
                        <tr>
                            <td colspan="3"></td>
                            <td align="right" style="font-size:16px;" id="celda3">Zona Gris</td>
                            <td align="center" style="font-size:16px;" id="celda4">0.51 - 1.00</td>
                        </tr>
                        <tr>
                            <td colspan="3"></td>
                            <td align="right" style="font-size:16px;" id="celda5">Reactivo</td>
                            <td align="center" style="font-size:16px;" id="celda6">Mayor a - 1.00</td>
                        </tr>
                        <tr>
                            <td align="left" style="font-size:16px;">Ac. anti Herpes Simple II IgM</td>
                            <td align="center">
                                <input class="form-control input-sm inp2-selector" type="text" list="opciones_1" id="select_1" name="hvm2" onkeyup="inp2(this)" oninput="inp2()" placeholder="HV2M" style="text-align: center; width: 70%; font-weight:bold;" value="<?php echo $resul2["hvm2"]; ?>">
                                <datalist id="opciones_1">
                                    <option value="Negativo">Negativo</option>
                                    <option value="Positivo">Positivo</option>
                                </datalist>
                            </td>
                            <td align="center" style="font-size:16px;"></td>
                            <td align="right" style="font-size:16px;"></td>
                            <td align="center" style="font-size:16px;">Negativo</td>
                        </tr>

De igual forma si habrá alguna manera de reducir el código por que lo veo muy largo y abecés manejo mas campos de los que son y se hace muy extenso poner mucho código que se que se puede reducir pero no me hayo como hacerlo.

1 respuesta 1

2

A ver, yo lo que veo es que tu le pones los estilos a cada celda según un valor, pero cuando cambia ese valor, solo le cambias los estilos a las celdas correspondientes. Si quieres que las otras celdas vuelvan al color original se lo tendrás que indicar. De la misma manera que le das unos estilos, los tienes que cambiar cuando se dan otras circunstancias.

if ($(elemento).val() >= 0.51 && $(elemento).val() <= 1.00) {
                document.getElementById("celda3").style.backgroundColor = "#e17055";
                document.getElementById("celda3").style.color = "white";
                document.getElementById("celda4").style.backgroundColor = "#e17055";
                document.getElementById("celda4").style.color = "white";

                document.getElementById("celda1").style.backgroundColor = "#FFFFFF";
                document.getElementById("celda1").style.color = "#000000";
            }

Por otra parte el primer condicional es <= 0.51. Y el segundo condicional empieza en >=0.51. En caso de que el valor sea 0.51, podría haber un conflicto, que en este caso no se dará porque al leer el código obedecerá a la linea que se encuentre más abajo. Pero le estas dando dos condiciones para el mismo valor. Espero haber entendido tu problema y haberte ayudado. Saludos

1
  • muchísimas gracias jbort me haz ayudado y si sale como yo quería muchísimas gracias amigo.
    – lab qc
    el 14 oct. 2021 a las 14:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.