I am facing an issue with my code where, upon clicking the "apply to all" button, it automatically populates the columns for Monday through Friday only. However, I need Saturday and Sunday to remain empty without any data.
$('#elemento').click(function() {
var checkedValues = Array(8).fill(false);
var textValues = Array(7).fill('');
var checkedStep = 0;
var textStep = 0;
var data_idparcela = [];
$("[data-day]").each(function() {data_idparcela.push(this.value)});
for(var i = 0; i < data_idparcela.length; i++){
var id_data = new Date(data_idparcela[i]);
var id_data = id_data.getDay();
$('tr').find('input[type="checkbox"]').each(function(index, value){
if(index < 8){
checkedValues[index] = $(this).prop("checked");
}else{
if(checkedStep == 8){
checkedStep = 0;
}
if (id_data >= 1 && id_data <= 5) {
$(this).prop('checked', checkedValues[checkedStep++]);
}
else {
checkedStep++;
}
}
});
$('tr').find('input[type="text"]').each(function(index, value){
if(index < 7){
textValues[index] = $(this).val();
}else{
if(textStep == 7){
textStep = 0;
}
if (id_data >= 1 && id_data <= 5) {
$(this).val(textValues[textStep++]);
}
else {
textStep++;
}
}
});
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="elemento">Apply to All </button>
<table>
<tr>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td>
<div id='dia4'>
<input type="checkbox" data-day='' value="2022-11-01">2022-11-01
<div>
<input type="checkbox" name="vehicle" value="Bike">Breakfast
<input type="text" size="10">
</div>
<div>
<input type="checkbox">Lunch
<input type="text" size="10">
</div>
<div>
<input type="checkbox">Diet Lunch
<input type="text" size="10">
</div>
<div>
<input type="checkbox">Snack
<input type="text" size="10">
</div>
<div>
<input type="checkbox">Dinner
<input type="text" size="10">
</div>
<div>
<input type="checkbox">Diet Dinner
<input type="text" size="10">
</div>
<div>
<input type="checkbox">Supper
<input type="text" size="10">
</div>
</div>
</td>>
... (continued)
</tr>
</table>The issue arises when the "apply to all" button is clicked as it fills in all days including Saturday and Sunday.
To tackle this problem, I retrieve the date from each td using getDay() function to convert the days into numbers. Then, a condition should only populate the columns for days between Monday and Friday (numbered 1-5), while skipping Saturday and Sunday (numbered 0 and 6).