Button to apply the same data to every day of the week-CodePudding

I have the following code, where I fill in the data of the first day of the month and then clicking on the "Apply to All" button writes the same values on every day of the month. Here is a working example:

$('#elemento').click(function() {
  var checkedValues = Array(8).fill(false);
  var textValues = Array(7).fill('');
  var checkedStep = 0;
  var textStep = 0;
  
  $('tr').find('input[type="checkbox"]').each(function(index, value) {
    if (index < 8) {
      checkedValues[index] = $(this).prop("checked");
    } 
    else {
      if (checkedStep == 8) {
        checkedStep = 0;
      }
      $(this).prop('checked', checkedValues[checkedStep  ]);
    }
  });
  
  $('tr').find('input[type="text"]').each(function(index, value) {
    if (index < 7) {
      textValues[index] = $(this).val();
    } 
    else {
      if (textStep == 7) {
        textStep = 0;
      }
      $(this).val(textValues[textStep  ]);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="elemento">Aplica a Todos </button>

<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
    <th>sunday</th>
  </tr>
  
  <tr>
    <td>
      <div id='dia'>
        <input type="checkbox">2022-10-31
        
        <div>
          <input type="checkbox">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia1'>
        <input type="checkbox">2022-11-01
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia2'>
        <input type="checkbox">2022-11-02
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia3'>
        <input type="checkbox">2022-11-03
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia4'>
        <input type="checkbox">2022-11-04
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia5'>
        <input type="checkbox">2022-11-05
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia6'>
        <input type="checkbox">2022-11-06
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
  </tr>
</table>

What I wanted was to fill in the first day of the month and then, when clicking on the "Apply to All" button, just fill in the days of the week (Monday, Tuesday, Wednesday, Thursday and Friday) of the month and the days of the end of week were left unfilled.

Can you help?

CodePudding user response：

You can achieve this by checking the index of the parent table cell:

$(this).parents('td').index()

Because the index starts with a 0, the weekdays have an index lower than 5. Therefor you should only add the checked property or the text value, if the index is smaller than 5:

if ($(this).parents('td').index() < 5) {
  $(this).val(textValues[textStep  ]);
}
else {
  textStep  ;
}

Working example:

$('#elemento').click(function() {
  var checkedValues = Array(8).fill(false);
  var textValues = Array(7).fill('');
  var checkedStep = 0;
  var textStep = 0;
  
  $('tr').find('input[type="checkbox"]').each(function(index, value) {
    if (index < 8) {
      checkedValues[index] = $(this).prop("checked");
    } 
    else {
      if (checkedStep == 8) {
        checkedStep = 0;
      }
      
      if ($(this).parents('td').index() < 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 ($(this).parents('td').index() < 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">Aplica a Todos </button>

<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
    <th>sunday</th>
  </tr>
  
  <tr>
    <td>
      <div id='dia'>
        <input type="checkbox">2022-10-31
        
        <div>
          <input type="checkbox">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia1'>
        <input type="checkbox">2022-11-01
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia2'>
        <input type="checkbox">2022-11-02
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia3'>
        <input type="checkbox">2022-11-03
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia4'>
        <input type="checkbox">2022-11-04
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia5'>
        <input type="checkbox">2022-11-05
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <td>
      <div id='dia6'>
        <input type="checkbox">2022-11-06
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
  </tr>
</table>