Home / Questions / 329220
Accepted
Huntzberger
Asked: 2020-02-14 10:12:47 +0800 CST 2020-02-14 10:12:47 +0800 CST

Change color of html table columns depending on the value

  • 772

I have a table with the following structure, which is populated with json data that I get from my controller.

<div class="table-responsive table-condensed table-sm table-bordered tabla">
    <table class="table table-hover content-tabla" id="Datos" cellpadding="0" cellspacing="0">
        <thead>
            <tr class="table-success">
                <td>Código</td>
                <td>Nombre</td>
                <td>Pronosticado</td>
                <td></td>
                <td>Pronosticado Acumulado</td>
                <td>Entregado</td>
                <td>Diferencia</td>
                <td></td>
                <td>Pronosticado Actual</td>
                <td>Entregado</td>
                <td>Diferencia</td>
                <td>Activar</td>
            </tr>
        </thead>
        <tbody>
            <tr></tr>
        </tbody>
    </table>
</div>

Now what I need is to apply a background with jquery to the columns called Difference but according to the values ​​obtained.

This is just an example of what I want to achieve:

if(micolumna=='100%')
{
background-color=black;
color:red;
}

So I fill my table

<script src="~/js/Jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        datos();       
    });     

  function datos() {
        $.getJSON("/MyController/Index", function (data) {
            $.each(data, function (idx, opt) {
                $('#Datos').append('<tr><td>' + opt.Codigo + '</td><td>' + opt.Nombre + '</td><td>' + opt.Pronostico + '</td><td>' + '' + '</td><td>' + opt.PronosticoAA + '</td><td>' + opt.Entregado + '</td><td>' + opt.DiferenciaAA + '</td><td>' + '' + '</td><td>' + opt.PronosticoSA + '</td><td>' + opt.EntregadoSA + '</td><td>' + opt.DiferenciaSA + '</td><td><input type="checkbox" name="cod_A" id="cod_A" value="A" /></td></tr>');
            });
        }, 'json');
    }       
</script>

html

3 Answers

  1. Best Answer

    You can ask for the value of "Difference" before creating the column and then concatenate it to the HTML, something like this:

    <script src="~/js/Jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        datos();       
    });     

  function datos() {
        $.getJSON("/MyController/Index", function (data) {
            $.each(data, function (idx, opt) {
                var estilo1 = '', estilo2 = '';
                if (opt.DiferenciaAA == '100%')
                    estilo1 = 'background-color=black;color:red;';
                if (opt.DiferenciaSA == '100%')
                    estilo2 = 'background-color=black;color:red;'
                $('#Datos').append('<tr><td>' + o pt.Codigo + '</td><td>' + opt.Nombre + '</td><td>' + opt.Pronostico + '</td><td>' + '' + '</td><td>' + opt.PronosticoAA + '</td><td>' + opt.Entregado + '</td><td style=' + estilo1 + '">' + opt.DiferenciaAA + '</td><td>' + '' + '</td><td>' + opt.PronosticoSA + '</td><td>' + opt.EntregadoSA + '</td><td style="' + estilo2 + '">' + opt.DiferenciaSA + '</td><td><input type="checkbox" name="cod_A" id="cod_A" value="A" /></td></tr>');
            });
        }, 'json');
    }       
</script>

    Luck!

    • 3

  2. What you can do is when you are creating each row, check for the value of the difference variable and apply a class if it meets your condition. Something like:

    var diferenciaAAClass = '';
if (opt.DiferenciaAA == 100)
	diferenciaAAClass = 'nombre_de_tu_clase_css';
var diferenciaSAClass = '';
if (opt.DiferenciaSA == 100)
	diferenciaSAClass = 'nombre_de_tu_clase_css';
$('#Datos').append('<tr><td>' + opt.Codigo + '</td><td>' + opt.Nombre + '</td><td>' + opt.Pronostico + '</td><td>' + '' + '</td><td>' + opt.PronosticoAA + '</td><td>' + opt.Entregado + '</td><td class="' + diferenciaAAClass + '">' + opt.DiferenciaAA + '</td><td>' + '' + '</td><td>' + opt.PronosticoSA + '</td><td>' + opt.EntregadoSA + '</td><td class="' + diferenciaSAClass + '">' + opt.DiferenciaSA + '</td><td><input type="checkbox" name="cod_A" id="cod_A" value="A" /></td></tr>');

    • 1

  3. I suggest several ways to accomplish the task.

    If you don't want to change the way you generate the table, you can make the following call to change the style afterwards:

    /* Cambiamos el estilo al deseado */
$('td:contains(100%)').css({
  'background-color': 'black',
  'color': 'red',
});
/* Analizamos cada elemento para cambiar el estilo */
$('td').each((n, elemento) => {
  /* Si es un porcentaje al final analizamos el contenido */
  if (elemento.innerText.match('%$')) {
    let valor = parseInt(elemento.innerText);
    if (valor < 60) {
      elemento.style.color = 'orange';
    } else if (valor <= 100) {
      elemento.style.color = 'red';
    }
  }
});
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="table-responsive table-condensed table-sm table-bordered tabla">
    <table class="table table-hover content-tabla" id="Datos" cellpadding="0" cellspacing="0">
        <thead>
            <tr class="table-success">
                <th>Código</th>
                <th>Nombre</th>
                <th>Pronosticado</th>
                <th></th>
                <th>Pronosticado Acumulado</th>
                <th>Entregado</th>
                <th>Diferencia</th>
                <th></th>
                <th>Pronosticado Actual</th>
                <th>Entregado</th>
                <th>Diferencia</th>
                <th>Activar</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Código</td><td>Nombre</td><td>100%</td><td></td><td>Pronosticado Acumulado</td><td>Entregado</td><td>Diferencia</td><td></td><td>100%</td><td>Entregado</td><td>Diferencia</td><td>Activar</td>
            </tr>
            <tr>
                <td>Código</td><td>Nombre</td><td>50%</td><td></td><td>Pronosticado Acumulado</td><td>Entregado</td><td>Diferencia</td><td></td><td>60%</td><td>Entregado</td><td>Diferencia</td><td>Activar</td>
            </tr>
        </tbody>
    </table>
</div>

    Another way to do it is through fields data-*, adding the data to an attribute (for example data-pronostico) and not to its content:

    function datos() {
  $.getJSON("/MyController/Index", function (data) {
    $.each(data, function (idx, opt) {
      $('#Datos').append('<tr><td>' + opt.Codigo + '</td><td>' + opt.Nombre + '</td><td>' + opt.Pronostico + '</td><td>' + '' + '</td><td data-pronostico="' + opt.PronosticoAA + '"></td><td>' + opt.Entregado + '</td><td>' + opt.DiferenciaAA + '</td><td>' + '' + '</td><td data-pronostico="' + opt.PronosticoSA + '"></td><td>' + opt.EntregadoSA + '</td><td>' + opt.DiferenciaSA + '</td><td><input type="checkbox" name="cod_A" id="cod_A" value="A" /></td></tr>');
    });
  }, 'json');
}

    Now we can configure the styles with pure CSS without the need for javascript:

    /* Hacemos que se muestre el contenido de "data-pronostivo" */
[data-pronostico]:before {
	content: attr(data-pronostico);
}

/* Pronósticos 100% */
[data-pronostico='100%'] {
  background-color: black;
  color: red;
}

/* Pronósticos de 50-59% */
[data-pronostico^='5']:not([data-pronostico='5%']) {
  color: orange;
}
/* Pronósticos de 60-99% */
[data-pronostico^='6']:not([data-pronostico='6%']),
  [data-pronostico^='7']:not([data-pronostico='7%']),
  [data-pronostico^='8']:not([data-pronostico='8%']),
  [data-pronostico^='9']:not([data-pronostico='9%'])
{
  color: red;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="table-responsive table-condensed table-sm table-bordered tabla">
    <table class="table table-hover content-tabla" id="Datos" cellpadding="0" cellspacing="0">
        <thead>
            <tr class="table-success">
                <th>Código</th>
                <th>Nombre</th>
                <th>Pronosticado</th>
                <th></th>
                <th>Pronosticado Acumulado</th>
                <th>Entregado</th>
                <th>Diferencia</th>
                <th></th>
                <th>Pronosticado Actual</th>
                <th>Entregado</th>
                <th>Diferencia</th>
                <th>Activar</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Código</td><td>Nombre</td><td data-pronostico="100%"></td><td></td><td>Pronosticado Acumulado</td><td>Entregado</td><td>Diferencia</td><td></td><td data-pronostico="100%">100%</td><td>Entregado</td><td>Diferencia</td><td>Activar</td>
            </tr>
            <tr>
                <td>Código</td><td>Nombre</td><td data-pronostico="50%"></td><td></td><td>Pronosticado Acumulado</td><td>Entregado</td><td>Diferencia</td><td></td><td data-pronostico="60%"></td><td>Entregado</td><td>Diferencia</td><td>Activar</td>
            </tr>
        </tbody>
    </table>
</div>

    • 0