0

tengo una tabla HTML con dos columna(descripción y valor), y necesito que cada fila de pinte de un color especifico dependiendo del valor que tenga la columna "valor".

Con jQuery estoy usando esto:

$("#mitabla td:last-child:contains(5)")
    .parents("tr")
    .css("background-color", "verde");

pero si hago lo mismo para cada valor(lo valores posibles son conocidos, solo números entre 1-10) no funciona, y solo colorea según la primera condición que haya escrito.

como se puede hacer esto, con algún if o switch?

1
  • daniel2017, muestranos un ejemplo del html de tu tabla para poder ayudarte mejor.
    – Einer
    Commented el 17 jul. 2017 a las 17:46

2 respuestas 2

1

Una forma de solucionarlo podría ser la siguiente:

  • Defines cada regla que aplica a cada caso (valor 1, 2, 3, etc.)
  • [Opcional] Si las filas se cargan dinámicamente, deberías mover estas reglas a una función (ejemplo: colorearFilas) y ejecutar dicha función cada vez se se actualiza la tabla.

Ejemplo:

$(function() {
  $('#table td:last-child:contains(1)').closest('tr').css('background-color', 'red');
  $('#table td:last-child:contains(2)').closest('tr').css('background-color', 'blue');
  $('#table td:last-child:contains(3)').closest('tr').css('background-color', 'green');
  // Así sucesivamente hasta llegar al 10
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>Descripción</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Algo 1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Algo 2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Algo 3</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Algo 4</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Algo 5</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

1
  • gracias, es lo que necesitaba Commented el 17 jul. 2017 a las 18:01
0

Una vez que cargas la pagina la tabla cambia de valor?

Si la respuesta es no, podrias usar algo asi:

<script type="text/javascript">
$( document ).ready( function() {
$( "#tiobeTable tbody tr td.ratings" ).each( function( index ) {
if ( parseFloat( $( this ).text() ) > 10 ) {
$( this ).addClass( "highlight" );
}
});
$( "#tiobeTable tbody tr td.delta" ).each( function( index ) {
if ( parseFloat( $( this ).text() ) < 0 ) {
$( this ).addClass( "highlight-negative" );
}
});
});
</script>

Si no se entiende avisame y te lo explico mejor. Te paso el link de donde lo saque, que tiene mas info que puede serte util. Saludos.

https://www.packtpub.com/books/content/showhide-rows-and-highlighting-cells

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.