-2

inserir a descrição da imagem aqui

tenho um table que mostra os vencimentos, como posso deixar a fonte vermelha ou o fundo vermelho se estiver vencido? usando css

minha table é montada da seguinte forma

 <table id="myTable" class="uk-table sortable uk-table-hover uk-text-nowrap" cellspacing="0" cellpadding="1" border="0" width="99%">
                            <thead>
                                <tr>
                                    <th class="uk-width-1-10 uk-text-center small_col"><input type="checkbox" icheck ng-change="sellall()" ng-model="table1.selectAll" class="check_all" table-check-all></th>
                                    <th style="width: 80px">AÇÕES</th>
                                    <th style="width: 70px">EMISSÃO</th>
                                    <th style="width: 70px">VENCIMENTO</th>
                                    <th style="width: 200px">PESSOA</th>
                                    <th style="width: 80px; text-align:right">VALOR</th>
                                    <th style="width: 80px; text-align:right">PAGO</th>
                                    <th style="width: 80px; text-align:right">SALDO</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th>Selecionado:<span class="uk-badge uk-badge-notification uk-text-large">{{valSelecionado | currency : ''}}</span></th>
                                    <th>Pago: <span class="uk-badge uk-badge-notification uk-badge-success uk-text-large">{{valJaPago | currency : ''}}</span></th>
                                    <th>Saldo: <span class="uk-badge uk-badge-notification uk-badge-warning uk-text-large">{{valBaixar | currency : ''}}</span></th>
                                    <th></th>
                                    <th style="text-align:right">{{totalSelect | currency: ''}}</th>
                                    <th style="text-align:right">{{totalPago | currency: ''}}</th>
                                    <th style="text-align:right">{{totalSelect - totalPago| currency: ''}}</th>
                                </tr>
                            </tfoot>
                            <tbody>
                                <!--ng-change="tteste()" ng-checked="tteste()" ng-click="tteste()"-->
                                <tr ng-repeat="item in registro" on-last-repeat>
                                    <td class="uk-text-center uk-table-middle small_col"><input type="checkbox" icheck ng-model="tabela[$index]" ng-change="addRem($index, tabela, item)" class="check_row" table-check-row></td>
                                    <td style="width: 50px" class="">
                                        <a class="tooltip" title="Deletar" ng-click="delRegistro(item)"><i class="md-icon material-icons uk-text-danger tooltip" title="Deletar">&#xE872;</i></a>
                                        <a ng-click="editRegistro(item)" href="#modalcadastro" data-uk-modal="{ center:true, bgclose:false }"><i class="md-icon material-icons tooltip" title="Editar">mode_edit</i></a>
                                        <a ng-click="setDadosBaixar(item)" href="#modalbaixa" data-uk-modal="{ center:true, bgclose:true }"><i class="md-icon material-icons tooltip" title="Editar">file_download</i></a>
                                        <a ng-click="cleanContaMov(); getContaMov(item)" href="#modalbaixados" data-uk-modal="{ center:true, bgclose:true }"><i class="md-icon material-icons tooltip" title="Visualizar baixas parciais">chrome_reader_mode</i></a>
                                    </td>
                                    <td>{{item.dt_emissao}}</td>
                                    <td>{{item.dt_vencto}}</td>
                                    <td>{{item.PessoaModel.razao | limitTo : 30 : 0}} <a ng-if="item.PessoaModel.razao.length > 30">...</a> </td>
                                    <td style="text-align:right">{{item.valor | currency: ''}}</td>
                                    <td style="text-align:right">{{item.vlr_pago | currency: ''}}</td>
                                    <td style="text-align:right">{{item.saldo | currency: ''}}</td>
                                </tr>
                            </tbody>
                        </table>

*** tenho um campo que quando esta vencido o valor dele é "sim"

14
  • 2
    O ideal será aplicar um estilo no momento que a tabela estiver sendo montada, para não precisar percorrer toda ela depois. Ela é carregada por ajax? Compartilhe conosco os trechos relevantes de código de como a tabela é criada.
    – BrTkCa
    Commented 28/06/2017 às 14:42
  • Com html e css não tem como verificar, você precisa usar javascript. Coloque as tags adequadas na sua pergunta.
    – Stéfano
    Commented 28/06/2017 às 14:50
  • você não pode usar js??
    – rLinhares
    Commented 28/06/2017 às 14:59
  • eu uso angular, carrego a table usando ng-repeat com o json que vem do backend, poderia uasr js sim **Nao axei opção de editar o post Commented 28/06/2017 às 15:07
  • class="dt-vencida-color" já existia antes da resposta do Mateus ser dada?
    – Woss
    Commented 28/06/2017 às 15:15

3 Respostas 3

3

Segue um exemplo utilizando classes.

.dt-vencida-color{
  color: red;
}

.dt-vencida-background{
  background: red;
}
<table>
  <tbody>
    <tr>
      <td>Mateus</td>
      <td class="dt-vencida-color">25/06/2017</td>
    </tr>
    <tr>
      <td>Mateus</td>
      <td class="dt-vencida-background">25/06/2017</td>
    </tr>
  </tbody>
</table>

7
  • Não responde a pergunta. O objetivo é checar se está vencido para aplicar o estilo.
    – BrTkCa
    Commented 28/06/2017 às 14:47
  • Você leu direitinho a pergunta ? ele nao pediu uma função para verificar se a data está vencida ou não. Commented 28/06/2017 às 14:48
  • Até porque não tem nem informação de quando a data vai estar vencida ou como a tabela é alimentada Commented 28/06/2017 às 14:49
  • se estiver vencido. Pra isso temos a área de comentários. Se a dúvida fosse de como aplicar um estilo qualquer, provavelmente será duplicada.
    – BrTkCa
    Commented 28/06/2017 às 14:50
  • 1
    E como o código vai saber que a data está vencida? Não é pessoal @MateusVeloso, é ético explicar o motivo de um voto negativo. Responder apenas com base no título sem usar comentários deixa sujeito à isso, é minha opinião.
    – BrTkCa
    Commented 28/06/2017 às 14:58
2

Seguindo fielmente apenas a informação que você passou (suas opções ficaram meio em aberto), acredito que você possa adaptar o datejs ao seu site.

Retire dos exemplos as informações mais importantes. Para seu HTML, adicione:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>

e adiciona a classa data onde informei.

Utilize o JS:

var dia = Date.today();

$(document).ready(function() {
  $('.data').each(function() {
    var dueDate = $(this).text();
    var due = Date.parse(dueDate);
    var compare = Date.compare(due, dia);

    if (compare == -1) {
      $(this).addClass("expirado");
    }
  });
});

E por fim o CSS:

table {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: aliceblue;
}

table td {
  width: 10%;
}

.expirado {
  color: red;
}

EDIT:

Vi que editou a pergunta e agora mostra a sua tabela. O meu exemplo abaixo funciona apenas se a <td> com a data de vencimento tiver a class data que eu sugeriria que adicionasse. Isso é possível? No caso de não ser, substitua o .data por td:nth-child(2) e veja se te atende. No seu caso específico, você também pode utilizar ele assim de forma mais completa: table#myTable tr > td:nth-child(2)


Deixo abaixo um exemplo que criei usando o Datejs:

Exemplo:

Com .data

var dia = Date.today();

$(document).ready(function() {
  $('.data').each(function() {
    var dueDate = $(this).text();
    var due = Date.parse(dueDate);
    var compare = Date.compare(due, dia);

    if (compare == -1) {
      $(this).addClass("expirado");
    }
  });
});
body {
  margin: 0;
  text-align: center;
}

table {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: aliceblue;
}

table td {
  width: 10%;
}

.expirado {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>28/06/2017</td>
      <td class="data">14/06/2017</td>
      <td>ADEMIR</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">30/06/2017</td>
      <td>EXEMPLO 1</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">01/01/2017</td>
      <td>EXEMPLO 2</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">02/01/2018</td>
      <td>EXEMPLO 3</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">15/07/2017</td>
      <td>EXEMPLO 4</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">28/02/2012</td>
      <td>EXEMPLO 5</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">23/05/2020</td>
      <td>EXEMPLO 6</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
  </tbody>
</table>

2
  • Por quê não usar o Angular direto para implementar a lógica? Bem mais simples, não?
    – Woss
    Commented 28/06/2017 às 16:53
  • 3
    @AndersonCarlosWoss De repente é mais simples pra quem entende de Angular, que não é meu caso. Hahaha... Commented 28/06/2017 às 16:53
1

Você está utilizando Angular, então use-o para implementar a lógica necessária. Você disse que possui uma coluna que tem valor Sim/Não indicando se a data está vencida, então basta você adicionar uma classe CSS ao elemento que possuir essa coluna igual a sim. No elemento, adicione:

ng-class="{'dt-vencida': item.vencido=='sim'}"

Se o valor de vencido for "sim", então a classe dt-vencida é adicionada ao elemento. No CSS, defina a classe com color: red, por exemplo.

Veja um exemplo funcional abaixo:

angular
  .module('myApp', [])
  .controller('myController', myController);

myController.$inject = ['$scope'];

function myController($scope) {
  $scope.itens = [
    {name: "Item 1", vencido: "não"},
    {name: "Item 2", vencido: "sim"},
    {name: "Item 3", vencido: "não"}
  ];
}
.dt-vencida {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul ng-app="myApp" ng-controller="myController">
  <li ng-repeat="item in itens">
    <span ng-class="{'dt-vencida': item.vencido=='sim'}">{{item.name}}</span>
  </li>
</ul>

Apenas o item 2 da lista possui o valor vencido='sim', então somente ele possuirá a classe dt-vencida e, portanto, só ele ficará na cor vermelha.

5
  • Com esse exemplo, ele valida a data ou só funciona se ele tiver previamente definido se está expirado ou não? Commented 28/06/2017 às 16:56
  • @LeonFreire Deve estar pré-definido. Como o autor disse que tal valor existe, é possível considerar que a validação é feita no servidor.
    – Woss
    Commented 28/06/2017 às 16:57
  • Entendi. Então no caso do angular, existira essa validação sendo feita já pelo servidor e esse código iria capturar essa validação e inserir a classe? Vou ter que estudar esse Angular. Commented 28/06/2017 às 16:59
  • 1
    @LeonFreire Angular é só front-end. A lista de itens ali eu criei manualmente a fim de exemplificar, mas o valor de $scope.itens seria o retorno de uma requisição AJAX, por exemplo. O servidor, independente da linguagem, irá fazer a validação e definir o valor de vencido como sim, se estiver vencido, ou não. A cláusula ng-class do Angular apenas permite você adicionar uma classe ao elemento se determinada condição for satisfeita. Neste exemplo, a classe dt-vencida é adicionada se a condição item.vencido=='sim' for satisfeita.
    – Woss
    Commented 28/06/2017 às 17:03
  • @AndersonCarlosWoss, resolvido, angular é mágico, pra quem sabe usar. Obrigado Commented 28/06/2017 às 17:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .