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

根据值更改html表格列的颜色

  • 772

我有一个具有以下结构的表，其中填充了从控制器获取的 json 数据。

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

现在我需要的是使用 jquery 将背景应用于名为 Difference 的列，但要根据获得的值。

这只是我想要实现的一个例子：

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

所以我填满了我的桌子

<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

    您可以在创建列之前询问“Difference”的值，然后将其连接到 HTML，如下所示：

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

    运气！

    • 3

  2. 您可以做的是在创建每一行时，检查差异变量的值并应用一个类（如果它符合您的条件）。就像是：

    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. 我提出了几种完成任务的方法。

    如果您不想更改生成表格的方式，可以在之后进行以下调用以更改样式：

    /* 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>

    另一种方法是通过 fields data-*，将数据添加到属性（例如data-pronostico）而不是其内容：

    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');
}

    现在我们可以使用纯 CSS 配置样式，而无需 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