0

Preciso alterar a cor da linha da tabela de acordo com a data que aparece. Data iguais precisam ter cores iguais. É sistema que cadastra quando o funcionário bate o ponto.

data_inicial = result.apontamentos[0].data;
        $.each(result.apontamentos, function(i) {
            var newRow = $("<tr>");
            var cols = ""; 

            if(data_inicial == result.apontamentos[i].data){
                cols += '<td class="cor_sim"></td>';
                //formatando a data
                var arrayData = result.apontamentos[i].data;
                var arr = arrayData.split('-');
                var data = arr[2] + "/" + arr[1] + "/" + arr[0];
                cols += '<td class="cor_sim">' + data +'</td>';
                cols += '<td class="cor_sim">' + result.apontamentos[i].hora + '</td>';
                cols += '</td>';
                newRow.append(cols);
                $("#apontamentos").append(newRow);
            }else{
                cols += '<td class="cor_nao"></td>';
                //formatando a data
                var arrayData = result.apontamentos[i].data;
                var arr = arrayData.split('-');
                var data = arr[2] + "/" + arr[1] + "/" + arr[0];
                cols += '<td class="cor_nao">' + data +'</td>';
                cols += '<td class="cor_nao">' + result.apontamentos[i].hora + '</td>';
                cols += '</td>';
                newRow.append(cols);
                $("#apontamentos").append(newRow);

            }                        
        });

No caso da imagem, a data 18/05 também deveria ter cor.

2
  • As datas estão sempre ordenadas em sequência ou pode ter datas diferentes intercaladas?
    – Sam
    20/05/2020 às 23:58
  • As datas então sempre em ordem decrescente e ordenadas. É um sistema para cadastrar o horário que um funcionário bate o ponto. Então vão ter dias que não não terão apontamentos (sábado ou domingo, por exemplo). 21/05/2020 às 0:03

1 Resposta 1

2

Em vez de aplicar a cor de fundo em cada coluna, você pode aplicar na linha inteira que já irá afetar todas as colunas da linha, e ainda pode evitar esse if...else com códigos repetitivos.

Minha sugestão é a cada volta do laço comparar se a data da volta corrente é diferente da volta anterior. Se forem iguais a classe será a mesma, e se forem diferentes, verifica qual classe a última linha da tabela possui e alterna a classe.

É só declarar duas variáveis antes do laço .each e dentro dele atribuir valores de acordo com o critério que mencionei acima:

const result = {
   apontamentos:[
      { data: "2020-05-20", hora: "12:00" },
      { data: "2020-05-20", hora: "12:00" },
      { data: "2020-05-19", hora: "12:00" },
      { data: "2020-05-19", hora: "12:00" },
      { data: "2020-05-18", hora: "12:00" },
      { data: "2020-05-18", hora: "12:00" },
      { data: "2020-05-17", hora: "12:00" },
      { data: "2020-05-16", hora: "12:00" },
      { data: "2020-05-15", hora: "12:00" },
      { data: "2020-05-15", hora: "12:00" },
      { data: "2020-05-14", hora: "12:00" },
      { data: "2020-05-13", hora: "12:00" },
      { data: "2020-05-12", hora: "12:00" },
      { data: "2020-05-12", hora: "12:00" },
      { data: "2020-05-11", hora: "12:00" }
   ]
}


var cordefundo, data_atual;
$.each(result.apontamentos, function(i) {

   if(result.apontamentos[i].data != data_atual){
      cordefundo = $("#apontamentos tr:last").hasClass("cor_sim") ? "nao" : "sim";
   }

   var newRow = $("<tr class='cor_"+cordefundo+"'>");
   var cols = ""; 

   cols += '<td></td>';
   //formatando a data
   var arrayData = result.apontamentos[i].data;
   var arr = arrayData.split('-');
   var data = arr[2] + "/" + arr[1] + "/" + arr[0];
   cols += '<td>' + data +'</td>';
   cols += '<td>' + result.apontamentos[i].hora + '</td>';
   cols += '</td>';
   newRow.append(cols);
   $("#apontamentos").append(newRow);
   
   data_atual = result.apontamentos[i].data;
   
});
.cor_sim{
   background-color: orange;
}
.cor_nao{
   background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="apontamentos" border="1"></table>

1
  • Muito obrigada!! Funcionou certinho!!! :D 21/05/2020 às 11:38

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 .