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.
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.