Table color yes/ color no by jquery

Asked

Viewed 61 times

0

I need to change the color of the table row according to the date that appears. Equal dates need to have equal colors. It is system that registers when the employee hits the point. 

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

            }                        
        });

In the case of the image, the date 18/05 should also have color.

javascript jquery table

  • Dates are always ordered in sequence or may have different dates interspersed?

  • The dates then always in descending and ordered order. It is a system to register the time an employee hits the point. Then you will have days that will not have notes (Saturday or Sunday, for example).

1 answer

2

Instead of applying the background color to each column, you can apply to the entire row that will already affect all columns in the row, and you can still avoid this if...else with repetitive codes.

My suggestion is to each loop of the loop compare whether the date of the current turn is different from the previous turn. If they are equal the class will be the same, and if they are different, check which class the last row of the table has and toggle the class.

Just declare two variables before the loop .each and within it assign values according to the criterion I mentioned above:

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>

  • Thank you!! It worked right!!! D

Browser other questions tagged javascript jquery table

You are not signed in. Login or sign up in order to post.