summary data

[Richard]

Hi paramvir

I succeeded by applying what you let me know.
Thank you very much.

Let me ask you one more question.
I want to display the summary data calculated by calculating the sum of daily data corresponding to each condition at the bottom of the screen.
I made it like the attached source, but no data is displayed on the screen.
After inquiring DB data or entering daily production data, I want to display summary data by calculating each.

I'd appreciate it if you could let me know what the problem is.

function calculateSummary(grid, refresh){
   var sum_product_qty1  = 0, sum_product_qty2  = 0, sum_product_qty3  = 0;
   var sum_shipment_qty1 = 0, sum_shipment_qty2 = 0, sum_shipment_qty3 = 0;
   var sum_stock_vc_qty1 = 0, sum_stock_vc_qty2 = 0, sum_stock_vc_qty3 = 0;
   var sum_stock_qty1    = 0, sum_stock_qty2    = 0, sum_stock_qty3    = 0;

   var data   = grid.option("dataModel.data");
   var CM   = grid.option("colModel");
   var cd_wcop      = CM[2].dataIndx;
   var cd_kind      = CM[15].dataIndx;   // cd_kind (Day(0), Night(1), Shipment(2), Etc(3), Stock(4))

   for(var i = 0; i < data.length; i++){
      var row         = data;
      var cd_wcop9   = data[cd_wcop];
      var cd_kind9   = data[cd_kind];

      if(cd_kind9 < 2){
         sum_product_qty1 += (row[18] * 1); // May 1st data
         sum_product_qty2 += (row[19] * 1); // May 2nd data
         sum_product_qty3 += (row[20] * 1); // May 3rd data
         // omit the rest
      }
      else if(cd_kind9 == 2){
         sum_shipment_qty1 += (row[18] * 1); // May 1st data
         sum_shipment_qty2 += (row[19] * 1); // May 2nd data
         sum_shipment_qty3 += (row[20] * 1); // May 3rd data
         // omit the rest
      }
      else if(cd_kind9 == 4){
         if(cd_wcop9  == "P165"){
            sum_stock_vc_qty1 += (row[18] * 1); // May 1st data
            sum_stock_vc_qty2 += (row[19] * 1); // May 2nd data
            sum_stock_vc_qty3 += (row[20] * 1); // May 3rd data
            // omit the rest
         }
         else{
            sum_stock_qty1 += (row[18] * 1); // May 1st data
            sum_stock_qty2 += (row[19] * 1); // May 2nd data
            sum_stock_qty3 += (row[20] * 1); // May 3rd data
            // omit the rest
         }
      }
   }

   var sum_product_data      = ["<b>Total Production: </b>",      "", sum_product_qty1,   sum_product_qty2,      sum_product_qty3];
   var sum_shipment_data   = ["<b>Total Shipment: </b>",         "", sum_shipment_qty1,   sum_shipment_qty2,   sum_shipment_qty3];
   var sum_stock_data      = ["<b>Total Stock(Non VC): </b>",   "", sum_stock_qty1,      sum_stock_qty2,      sum_stock_qty3];
   var sum_stock_vc_data   = ["<b>Total Stock(VC): </b>",      "", sum_stock_vc_qty1,   sum_stock_vc_qty2,   sum_stock_vc_qty3];

   return [sum_product_data, sum_shipment_data, sum_stock_data, sum_stock_vc_data];
};

var obj = {
   // some omitted
   load: function(){
      this.option('summaryData', calculateSummary(this));
   },
   dataReady: function(){
      this.option('summaryData', calculateSummary(this));
   },
   summaryData: function () {
      calculateSummary(this);
   }
   // omit the rest
};

[paramvir]

you should probably start from a small example as proof of concept before introducing any business logic.

Could you please share a jsfiddle.

[Richard]

Hi paramvir

When I registered the question above,
I tried to register by attaching the image attached below,
but an error occurred and I couldn't attach it.

To register the source in the jsfiddle you requested,
there are parts that need to be modified and the operating environment is different,
such as displaying local data on the screen.

So, I am attaching an image as below, so please refer to it and let me know how to solve it.

[paramvir]

Every row in summary data should be in same format as of rowData in main grid i.e., a plain object of key value pairs.

[Richard]

Hi paramvir

Unfortunately, I do not understand what you were referring to.
I would appreciate it if you could give me a more specific solution.

[paramvir]

Instead of

Code: [Select]

var sum_product_data      = ["<b>Total Production: </b>",      "", sum_product_qty1,   sum_product_qty2,      sum_product_qty3];

please use

Code: [Select]

var sum_product_data      = { dataIndx of field1: "<b>Total Production: </b>",   dataIndx of field2: sum_product_qty1,   dataIndx of field3: sum_product_qty2,    dataIndx of field4:  sum_product_qty3 };

for all the rows in summaryData.

[Richard]

Hi paramvir

As a result of applying to the program as you commented,
there is a problem that the data of 'Total Production' and 'Total Shipment' are displayed,
but the data of 'Total Stock(Non VC)' and 'Total Stock(VC)' are not displayed.

I would really appreciate it if you could tell me how to solve it.

Code: [Select]

function calculateSummary(grid){

var sum_product_qty = Array.from({length: 42}, () => 0);
var sum_shipment_qty = Array.from({length: 42}, () => 0);
var sum_stock_vc_qty = Array.from({length: 42}, () => 0);
var sum_stock_qty = Array.from({length: 42}, () => 0);

var data = grid.option("dataModel.data");
var CM = grid.option("colModel");
var cd_wcop = CM[2].dataIndx;
var cd_kind = CM[15].dataIndx; // cd_kind (Day(0), Night(1), Shipment(2), Etc(3), Stock(4))

for(var i = 0; i < data.length; i++){
var row = data[i];
var cd_wcop9 = data[i][cd_wcop];
var cd_kind9 = data[i][cd_kind];

if(cd_kind9 < 2){
sum_product_qty[40] += (row['total_pre_month'] * 1);
sum_product_qty[41] += (row['total_this_month1'] * 1);

sum_product_qty[1]  += (row['qty1'] * 1);
sum_product_qty[2]  += (row['qty2'] * 1);
sum_product_qty[3]  += (row['qty3'] * 1);
sum_product_qty[4]  += (row['qty4'] * 1);
sum_product_qty[5]  += (row['qty5'] * 1);
sum_product_qty[6]  += (row['qty6'] * 1);
sum_product_qty[7]  += (row['qty7'] * 1);
sum_product_qty[8]  += (row['qty8'] * 1);
sum_product_qty[9]  += (row['qty9'] * 1);
sum_product_qty[10] += (row['qty10'] * 1);
sum_product_qty[11] += (row['qty11'] * 1);
sum_product_qty[12] += (row['qty12'] * 1);
sum_product_qty[13] += (row['qty13'] * 1);
sum_product_qty[14] += (row['qty14'] * 1);
sum_product_qty[15] += (row['qty15'] * 1);
sum_product_qty[16] += (row['qty16'] * 1);
sum_product_qty[17] += (row['qty17'] * 1);
sum_product_qty[18] += (row['qty18'] * 1);
sum_product_qty[19] += (row['qty19'] * 1);
sum_product_qty[20] += (row['qty20'] * 1);
sum_product_qty[21] += (row['qty21'] * 1);
sum_product_qty[22] += (row['qty22'] * 1);
sum_product_qty[23] += (row['qty23'] * 1);
sum_product_qty[24] += (row['qty24'] * 1);
sum_product_qty[25] += (row['qty25'] * 1);
sum_product_qty[26] += (row['qty26'] * 1);
sum_product_qty[27] += (row['qty27'] * 1);
sum_product_qty[28] += (row['qty28'] * 1);
sum_product_qty[29] += (row['qty29'] * 1);
sum_product_qty[30] += (row['qty30'] * 1);
sum_product_qty[31] += (row['qty31'] * 1);
}
else if(cd_kind9 == 2){
sum_shipment_qty[40] += (row['total_pre_month'] * 1);
sum_shipment_qty[41] += (row['total_this_month1'] * 1);

sum_shipment_qty[1]  += (row['qty1'] * 1);
sum_shipment_qty[2]  += (row['qty2'] * 1);
sum_shipment_qty[3]  += (row['qty3'] * 1);
sum_shipment_qty[4]  += (row['qty4'] * 1);
sum_shipment_qty[5]  += (row['qty5'] * 1);
sum_shipment_qty[6]  += (row['qty6'] * 1);
sum_shipment_qty[7]  += (row['qty7'] * 1);
sum_shipment_qty[8]  += (row['qty8'] * 1);
sum_shipment_qty[9]  += (row['qty9'] * 1);
sum_shipment_qty[10] += (row['qty10'] * 1);
sum_shipment_qty[11] += (row['qty11'] * 1);
sum_shipment_qty[12] += (row['qty12'] * 1);
sum_shipment_qty[13] += (row['qty13'] * 1);
sum_shipment_qty[14] += (row['qty14'] * 1);
sum_shipment_qty[15] += (row['qty15'] * 1);
sum_shipment_qty[16] += (row['qty16'] * 1);
sum_shipment_qty[17] += (row['qty17'] * 1);
sum_shipment_qty[18] += (row['qty18'] * 1);
sum_shipment_qty[19] += (row['qty19'] * 1);
sum_shipment_qty[20] += (row['qty20'] * 1);
sum_shipment_qty[21] += (row['qty21'] * 1);
sum_shipment_qty[22] += (row['qty22'] * 1);
sum_shipment_qty[23] += (row['qty23'] * 1);
sum_shipment_qty[24] += (row['qty24'] * 1);
sum_shipment_qty[25] += (row['qty25'] * 1);
sum_shipment_qty[26] += (row['qty26'] * 1);
sum_shipment_qty[27] += (row['qty27'] * 1);
sum_shipment_qty[28] += (row['qty28'] * 1);
sum_shipment_qty[29] += (row['qty29'] * 1);
sum_shipment_qty[30] += (row['qty30'] * 1);
sum_shipment_qty[31] += (row['qty31'] * 1);
}
else if(cd_kind9 == 4){
if(cd_wcop9  == "P165"){
sum_stock_vc_qty[40] += (row['total_pre_month'] * 1);
sum_stock_vc_qty[41] += (row['total_this_month1'] * 1);

sum_stock_vc_qty[1]  += (row['qty1'] * 1);
sum_stock_vc_qty[2]  += (row['qty2'] * 1);
sum_stock_vc_qty[3]  += (row['qty3'] * 1);
sum_stock_vc_qty[4]  += (row['qty4'] * 1);
sum_stock_vc_qty[5]  += (row['qty5'] * 1);
sum_stock_vc_qty[6]  += (row['qty6'] * 1);
sum_stock_vc_qty[7]  += (row['qty7'] * 1);
sum_stock_vc_qty[8]  += (row['qty8'] * 1);
sum_stock_vc_qty[9]  += (row['qty9'] * 1);
sum_stock_vc_qty[10] += (row['qty10'] * 1);
sum_stock_vc_qty[11] += (row['qty11'] * 1);
sum_stock_vc_qty[12] += (row['qty12'] * 1);
sum_stock_vc_qty[13] += (row['qty13'] * 1);
sum_stock_vc_qty[14] += (row['qty14'] * 1);
sum_stock_vc_qty[15] += (row['qty15'] * 1);
sum_stock_vc_qty[16] += (row['qty16'] * 1);
sum_stock_vc_qty[17] += (row['qty17'] * 1);
sum_stock_vc_qty[18] += (row['qty18'] * 1);
sum_stock_vc_qty[19] += (row['qty19'] * 1);
sum_stock_vc_qty[20] += (row['qty20'] * 1);
sum_stock_vc_qty[21] += (row['qty21'] * 1);
sum_stock_vc_qty[22] += (row['qty22'] * 1);
sum_stock_vc_qty[23] += (row['qty23'] * 1);
sum_stock_vc_qty[24] += (row['qty24'] * 1);
sum_stock_vc_qty[25] += (row['qty25'] * 1);
sum_stock_vc_qty[26] += (row['qty26'] * 1);
sum_stock_vc_qty[27] += (row['qty27'] * 1);
sum_stock_vc_qty[28] += (row['qty28'] * 1);
sum_stock_vc_qty[29] += (row['qty29'] * 1);
sum_stock_vc_qty[30] += (row['qty30'] * 1);
sum_stock_vc_qty[31] += (row['qty31'] * 1);
}
else{
sum_stock_qty[40] += (row['total_pre_month'] * 1);
sum_stock_qty[41] += (row['total_this_month1'] * 1);

sum_stock_qty[1]  += (row['qty1'] * 1);
sum_stock_qty[2]  += (row['qty2'] * 1);
sum_stock_qty[3]  += (row['qty3'] * 1);
sum_stock_qty[4]  += (row['qty4'] * 1);
sum_stock_qty[5]  += (row['qty5'] * 1);
sum_stock_qty[6]  += (row['qty6'] * 1);
sum_stock_qty[7]  += (row['qty7'] * 1);
sum_stock_qty[8]  += (row['qty8'] * 1);
sum_stock_qty[9]  += (row['qty9'] * 1);
sum_stock_qty[10] += (row['qty10'] * 1);
sum_stock_qty[11] += (row['qty11'] * 1);
sum_stock_qty[12] += (row['qty12'] * 1);
sum_stock_qty[13] += (row['qty13'] * 1);
sum_stock_qty[14] += (row['qty14'] * 1);
sum_stock_qty[15] += (row['qty15'] * 1);
sum_stock_qty[16] += (row['qty16'] * 1);
sum_stock_qty[17] += (row['qty17'] * 1);
sum_stock_qty[18] += (row['qty18'] * 1);
sum_stock_qty[19] += (row['qty19'] * 1);
sum_stock_qty[20] += (row['qty20'] * 1);
sum_stock_qty[21] += (row['qty21'] * 1);
sum_stock_qty[22] += (row['qty22'] * 1);
sum_stock_qty[23] += (row['qty23'] * 1);
sum_stock_qty[24] += (row['qty24'] * 1);
sum_stock_qty[25] += (row['qty25'] * 1);
sum_stock_qty[26] += (row['qty26'] * 1);
sum_stock_qty[27] += (row['qty27'] * 1);
sum_stock_qty[28] += (row['qty28'] * 1);
sum_stock_qty[29] += (row['qty29'] * 1);
sum_stock_qty[30] += (row['qty30'] * 1);
sum_stock_qty[31] += (row['qty31'] * 1);
}
}
}

var sum_product_data = {
info_item: "Total Production", total_pre_month: sum_product_qty[40],  total_this_month1: sum_product_qty[41],
qty1:  sum_product_qty[1],  qty2:  sum_product_qty[2],  qty3:  sum_product_qty[3],  qty4:  sum_product_qty[4],    qty5:  sum_product_qty[5],
qty6:  sum_product_qty[6],  qty7:  sum_product_qty[7],  qty8:  sum_product_qty[8],  qty9:  sum_product_qty[9],    qty10: sum_product_qty[10],
qty11: sum_product_qty[11], qty12: sum_product_qty[12], qty13: sum_product_qty[13], qty14: sum_product_qty[14], qty15: sum_product_qty[15],
qty16: sum_product_qty[16], qty17: sum_product_qty[17], qty18: sum_product_qty[18], qty19: sum_product_qty[19], qty20: sum_product_qty[20],
qty21: sum_product_qty[21], qty22: sum_product_qty[22], qty23: sum_product_qty[23], qty24: sum_product_qty[24], qty25: sum_product_qty[25],
qty26: sum_product_qty[26], qty27: sum_product_qty[27], qty28: sum_product_qty[28], qty29: sum_product_qty[29], qty30: sum_product_qty[30],
qty31: sum_product_qty[31]
};
var sum_shipment_data = {
info_item: "Total Shipment", total_pre_month: sum_shipment_qty[40],  total_this_month1: sum_shipment_qty[41],
qty1:  sum_shipment_qty[1],  qty2:  sum_shipment_qty[2],  qty3:  sum_shipment_qty[3],  qty4:  sum_shipment_qty[4], qty5:  sum_shipment_qty[5],
qty6:  sum_shipment_qty[6],  qty7:  sum_shipment_qty[7],  qty8:  sum_shipment_qty[8],  qty9:  sum_shipment_qty[9], qty10: sum_shipment_qty[10],
qty11: sum_shipment_qty[11], qty12: sum_shipment_qty[12], qty13: sum_shipment_qty[13], qty14: sum_shipment_qty[14], qty15: sum_shipment_qty[15],
qty16: sum_shipment_qty[16], qty17: sum_shipment_qty[17], qty18: sum_shipment_qty[18], qty19: sum_shipment_qty[19], qty20: sum_shipment_qty[20],
qty21: sum_shipment_qty[21], qty22: sum_shipment_qty[22], qty23: sum_shipment_qty[23], qty24: sum_shipment_qty[24], qty25: sum_shipment_qty[25],
qty26: sum_shipment_qty[26], qty27: sum_shipment_qty[27], qty28: sum_shipment_qty[28], qty29: sum_shipment_qty[29], qty30: sum_shipment_qty[30],
qty31: sum_shipment_qty[31]
};
var sum_stock_data = {
info_item: "Total Stock(Non VC)", total_pre_month: sum_stock_qty[40],  total_this_month1: sum_stock_qty[41],
qty1:  sum_stock_qty[1],  qty2:  sum_stock_qty[2],  qty3:  sum_stock_qty[3],  qty4:  sum_stock_qty[4], qty5:  sum_stock_qty[5],
qty6:  sum_stock_qty[6],  qty7:  sum_stock_qty[7],  qty8:  sum_stock_qty[8],  qty9:  sum_stock_qty[9], qty10: sum_stock_qty[10],
qty11: sum_stock_qty[11], qty12: sum_stock_qty[12], qty13: sum_stock_qty[13], qty14: sum_stock_qty[14], qty15: sum_stock_qty[15],
qty16: sum_stock_qty[16], qty17: sum_stock_qty[17], qty18: sum_stock_qty[18], qty19: sum_stock_qty[19], qty20: sum_stock_qty[20],
qty21: sum_stock_qty[21], qty22: sum_stock_qty[22], qty23: sum_stock_qty[23], qty24: sum_stock_qty[24], qty25: sum_stock_qty[25],
qty26: sum_stock_qty[26], qty27: sum_stock_qty[27], qty28: sum_stock_qty[28], qty29: sum_stock_qty[29], qty30: sum_stock_qty[30],
qty31: sum_stock_qty[31]
};
var sum_stock_vc_data = {
info_item: "Total Stock(VC)", total_pre_month: sum_stock_vc_qty[40],  total_this_month1: sum_stock_vc_qty[41],
qty1:  sum_stock_vc_qty[1],  qty2:  sum_stock_vc_qty[2],  qty3:  sum_stock_vc_qty[3],  qty4:  sum_stock_vc_qty[4], qty5:  sum_stock_vc_qty[5],
qty6:  sum_stock_vc_qty[6],  qty7:  sum_stock_vc_qty[7],  qty8:  sum_stock_vc_qty[8],  qty9:  sum_stock_vc_qty[9], qty10: sum_stock_vc_qty[10],
qty11: sum_stock_vc_qty[11], qty12: sum_stock_vc_qty[12], qty13: sum_stock_vc_qty[13], qty14: sum_stock_vc_qty[14], qty15: sum_stock_vc_qty[15],
qty16: sum_stock_vc_qty[16], qty17: sum_stock_vc_qty[17], qty18: sum_stock_vc_qty[18], qty19: sum_stock_vc_qty[19], qty20: sum_stock_vc_qty[20],
qty21: sum_stock_vc_qty[21], qty22: sum_stock_vc_qty[22], qty23: sum_stock_vc_qty[23], qty24: sum_stock_vc_qty[24], qty25: sum_stock_vc_qty[25],
qty26: sum_stock_vc_qty[26], qty27: sum_stock_vc_qty[27], qty28: sum_stock_vc_qty[28], qty29: sum_stock_vc_qty[29], qty30: sum_stock_vc_qty[30],
qty31: sum_stock_vc_qty[31]
};
return [sum_product_data, sum_shipment_data, sum_stock_data, sum_stock_vc_data];
};

[paramvir]

As per the screenshot, data of 'Total Stock(Non VC)' and 'Total Stock(VC)' is being displayed as 0 values.

If 0 value is not expected, then you need to debug your code to correct your calculations.

[Richard]

Hi paramvir.

What I want is that daily stock data is added and displayed in Row of Total Stock (Non VC)
when cd_wcop is not P165, and displayed in Row of Total Stock (VC) when cd_wcop is P165.
Results should be displayed as in the attached image.

It seems that there is nothing wrong with the calculation formula,
so I would really appreciate it if you could let me the solution.

[paramvir]

What's the dataIndx of 5/1 (Sun) column?

Please put a break statement in your code just after assignment of values to sum_stock_vc_data and check the value of sum_stock_vc_data[ dataIndx of 5/1 (Sun) column ]

[Richard]

Hi paramvir

The index of the 5/1 (Sun) column is qty1.

When a user inputs daily data into Day, Night, Shipment, Etc Cell by adding this.option('summaryData', calculateSummary(this)); in change: function(),
it is calculated according to the value of cd_wcop and data is displayed in Row cells of Total Stock (Non VC) and Total Stock (VC) confirmed to be.

Code: [Select]

var obj = {
title: '<b>Production Schedule</b>',
menuUI: { singleFilter: true },
filterModel: { on: true, header: true, type: 'local' },
height: 900,
freezeCols: 14,
collapsible: {on: false},
hwrap: true,
trackModel: { on: true },

render: function(){
grid = this;
},

change: function(){
this.option('summaryData', calculateSummary(this));
//grid = this;
this.refresh();
},
hideCols: function (){
var $tb = this.toolbar();
$('button.changes', $tb).button('option', { disabled: false });
},
load: function(){
this.option('summaryData', calculateSummary(this));
},
dataReady: function(){
this.option('summaryData', calculateSummary(this));
},

< omitted below >
}
However, the problem is that when a user accesses the screen for the first time and display DB data,
Total Production and Total Shipment data are displayed on the screen,
but Total Stock (Non VC) and Total Stock (VC) data are not displayed, only 0 is displayed.

In the case of stock data of each Product Name(CC-1, AA-1, BB-1 in the image attached above) as shown in the source below,
it is calculated and displayed for each cell as in pre_month_stock + day + night - shipment - etc.
It is thought that the data is not displayed in the Summary part in the current source code state.

I would really appreciate it if you could let me how to solve it.

Code: [Select]

dataModel: {
dataType: 'JSON',
location: 'remote',
recIndx: 'id',
url: "product_plan_save.php",
getData: function (response){
debugger;
response.data.forEach(function(rd){
if(rd.cd_kind == 4){
var tot_this_month = 0;
Object.defineProperty(rd, 'qty1', {
enumerable: true, get(){
var rd = this, ri = rd.pq_ri, pdata = grid.pageData(),
pre_month_stock = rd['total_pre_month'],
day = (pdata && pdata[ri-4])? pdata[ri-4].qty1: 0,
night = (pdata && pdata[ri-3])? pdata[ri-3].qty1: 0,
shipment = (pdata && pdata[ri-2])? pdata[ri-2].qty1: 0,
etc = (pdata && pdata[ri-1])? pdata[ri-1].qty1: 0;
return pre_month_stock + day + night - shipment - etc;
}
}),

Object.defineProperty(rd, 'qty2', {
enumerable: true, get(){
var rd = this, ri = rd.pq_ri, pdata = grid.pageData(),
pre_day_stock = (pdata && pdata[ri])? pdata[ri].qty1: 0,
day = (pdata && pdata[ri-4])? pdata[ri-4].qty2: 0,
night = (pdata && pdata[ri-3])? pdata[ri-3].qty2: 0,
shipment = (pdata && pdata[ri-2])? pdata[ri-2].qty2: 0,
etc = (pdata && pdata[ri-1])? pdata[ri-1].qty2: 0;
tot_this_month = pre_day_stock + day + night - shipment - etc;
return tot_this_month;
}
}),

< Intermediate omitted >

Object.defineProperty(rd, 'total_this_month1', {
get (){
return tot_this_month;
}
}),
Object.defineProperty(rd, 'total_this_month2', {
get (){
return tot_this_month;
}
})
}
})
return response;
}
},

[paramvir]

There are 4 summary rows.

you mean upon initialization of grid, Total Stock (Non VC) and Total Stock (VC) display incorrect ( unexpected ) values while other 2 summary rows display correct values.

Upon change in data cells, all the summary rows display correct values.

Please share a jsfiddle so that I debug your code and find out the issue.

[Richard]

Hi paramvir

I've shared the code you requested on jsfiddle, so please review it.

https://jsfiddle.net/elcid1/bz3atjgx/

The problem with my code is that when the user accesses the screen,
data is not displayed at (A) and (B) as in the attached image.
However, if the user enters daily data, the data is displayed normally.

I would really appreciate it if you could let me how to solve it.

[paramvir]

Mentioned issues have been resolved by

1. moving the formulas to getters
2. computing summary data in appropriate event

Please check this:

https://jsfiddle.net/37rda8sn/2/

PS: use loops to make your code compact and easier to maintain.

[Richard]

Hi paramvir

Thank you so much for your active help and for solving the problem I've been struggling with.
If you live close to me, I want to buy you delicious food.
Thank you so much.

But for me, there are a few issues that need to be addressed:

1) As shown in the attached image, if one is selected from the Year-Month List,
   the data registered in the DB corresponding to the selected Year-Month is retrieved and displayed on the screen.

2) When the user presses the Previous or Next button,
   the data registered in the DB corresponding to the Previous or Next button of Year-Month currently selected
   from the list in front of the button is retrieved and displayed on the screen.

3) If the user enters daily data or comment data into the cell
   and selects another Year-Month in the list or presses the Previous or Next button without saving data (when the Save button is activated)
   after displaying the warning message, subsequent steps should be ignored.

I've been thinking about it, but unfortunately I can't find a solution.
I would really appreciate it if you could let me how to solve it.