0

necesito resaltar con un color especifico la el campo según un valor, pero no se como realizarlo si alguien me puede ayudar se lo agradecería es para un trabajo.

tengo este código que me lista información de mi tabla-

<div class="table-responsive">
<table class="table table-bordered" style="font-size:10px;">
  <thead>
    <tr>
      <th style="width:5%;">nivel</th>
      <th style="width:5%;">especialidad</th>
      <th style="width:5%;">rut</th>
      <th style="width:5%;">rut_2</th>
      <th style="width:15%;">nombres</th>
      <th style="width:5%;">estado</th>
     </tr>
  </thead>
   <tbody id="myTable">
    <tr>
        


        <?php
    
        $consulta = "SELECT * FROM SAE WHERE mat_estado='1' ORDER BY nivel ASC;";
        $resultado = mysql_query($consulta,$link);
        while($fila = mysql_fetch_array($resultado)){
        ?>  
            <tr>
                <td><?php echo $fila['nivel']; ?></td>
                <td><?php echo $fila['especialidad']; ?></td>
                <td><?php echo $fila['rut']; ?></td>
                <td><?php echo $fila['rut_2']; ?></td>
                <td><?php echo $fila['nombres']; ?></td>
                <td><?php echo $fila['estado']; ?></td>
            </tr>
    <?php
    }       
    ?>      
      
    </tr>
  </tbody>
</table>

y me entrega este resultado.

introducir la descripción de la imagen aquí

y necesito que se resalte de un color especifico según lo que indique en el ultimo campo algo asi como ALUMNO CONTINUA resaltado en verde, ALUMNO SE VA resaltado en rojo

quedo atento a los comentario, saludos y espero que me sepan entender y ayudar.

1
  • Recuerda siempre evitar el uso de mayúsculas sostenidas ;)
    – Alfabravo
    Commented el 15 dic. 2020 a las 20:58

1 respuesta 1

1

Podrías comenzar capturando el valor de celda y compararlo, luego simplemente le agregas el estilo que deseas, algo como esto.

Le puse un id para poder seleccionarlo, dentro seleccione la etiqueta tr, finalmente capturo el valor de cada fila la cual la recorro con un for, y dando asi la comparacion de la celda con el tipo de especialidad, tu puedes hacerlo con el que desees.

var table = document.getElementById("tablita");
var rows = table.getElementsByTagName("tr");
for (var z = 1; z < rows.length; z++) {
    if(rows[z].cells[1].innerHTML == 'CONTABILIDAD'){
      rows[z].style.backgroundColor = "green";
    }else{
      rows[z].style.backgroundColor = "red";
    }
}
<div class="table-responsive">
<table id="tablita" class="table table-bordered">
  <thead>
    <tr>
      <th>nivel</th>
      <th>especialidad</th>
      <th>rut</th>
      <th>rut_2</th>
      <th>nombres</th>
      <th>estado</th>
     </tr>
  </thead>
   <tbody id="myTable">
      <tr>
          <td>1</td>
          <td>CONTABILIDAD</td>
          <td>72558468</td>
          <td>75845854</td>
          <td>FELIPE</td>
          <td>ESTADO 1</td>
      </tr>
      <tr>
          <td>1</td>
          <td>SISTEMAS</td>
          <td>72558468</td>
          <td>75845854</td>
          <td>FELIPE</td>
          <td>ESTADO 1</td>
      </tr>
  </tbody>
</table>

3
  • estimado @Felipe Urcia gracias por la respuesta pero disculpa mi ignorancia pero estoy recién aprendiendo. como se incorpora este código var table = document.getElementById("tablita"); var rows = table.getElementsByTagName("tr"); for (var z = 1; z < rows.length; z++) { if(rows[z].cells[1].innerHTML == 'CONTABILIDAD'){ rows[z].style.backgroundColor = "green"; }else{ rows[z].style.backgroundColor = "red"; } }
    – JAGR
    Commented el 16 dic. 2020 a las 1:22
  • Tendrias que colocarlo entre etiquetas de <script></script> en la pagina donde estara la tabla. Commented el 16 dic. 2020 a las 1:26
  • asi como lo planteas me funciono perfecto pero cuando lo implemento en mi código no me da ningún resultado
    – JAGR
    Commented el 16 dic. 2020 a las 1:56

Tu Respuesta

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

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