Searching the same date in table and add checkbox to td

Question

I have to do a training program , at the beginning I have to define the training period and for how many days you should take the same exercise cycle. so I have a table that represents my calendar and an array in which I put the training dates. I have to go through this array and look for the same date in the table. for a three-day cycle , for example , every time I find a match I have to add a checkbox in this td with class .checkbox1 then .checkbox2 in next td then .checkbox3 until the end of training period. the issue is that if I Put 3 in cycle input, it display 3 checkboxes in each td. I want just one checkbox with class .checkbox1 in the first td and in next td a checkbox with class .checkbox2 and in the third a one with class .checkbox3 and next one the class should be .checkbox1 ...

$('#save_planning').click(function() {
  
    var cycleLength = $('#cycle_length').val();
    var rangeArray = ["2016-4-3", "2016-4-4", "2016-4-5", "2016-4-6", "2016-4-7", "2016-4-8", "2016-4-9"];

    for (var i = 0; i < rangeArray.length; i++){
	  console.log(rangeArray[i]);
	  for (var j = 0; j < cycleLength; j++){						
	    $('.fc-day[data-date="' + rangeArray[i] + '"]').append($('<input>', { type:"checkbox", class:"checkbox"+j}));
	  }
	};
});

td {
      padding: 20px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>cycle</label>
    <input type="text" id="cycle_length">days

    <table border="1" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class="fc-day" data-date="2016-4-3">03</td>
          <td class="fc-day" data-date="2016-4-4">04</td>
          <td class="fc-day" data-date="2016-4-5">05</td>
          <td class="fc-day" data-date="2016-4-6">06</td>
          <td class="fc-day" data-date="2016-4-7">07</td>
          <td class="fc-day" data-date="2016-4-8">08</td>
          <td class="fc-day" data-date="2016-4-9">09</td>
          <td class="fc-day" data-date="2016-4-10">10</td>
          <td class="fc-day" data-date="2016-4-11">11</td>
          <td class="fc-day" data-date="2016-4-12">12</td>
          <td class="fc-day" data-date="2016-4-13">13</td>
          <td class="fc-day" data-date="2016-4-14">14</td>
          <td class="fc-day" data-date="2016-4-15">15</td>
          <td class="fc-day" data-date="2016-4-16">16</td>
        </tr>
      </tbody>
    </table>
<button id="save_planning">Save planning</button>

Is this the full code? your textbox is empty when you run this code so it wont loop. I recommend using a button that will call a function which contains your code — Koen
Uncaught ReferenceError: $ is not defined - You forgot to include jQuery? — J. Titus
sorry about that, the issue is that if I Put 3 in cycle input, it display 3 checkboxes in each td. I want just one checkbox with class .checkbox1 and in next td a checkbox with class .checkbox2 and in the third a one with class .checkbox3 and next one the class should be .checkbox1 ... — Nadia

J. Titus J. Titus · Accepted Answer · 2016-04-12T20:04:55

Try this. No need for multiple loops or an extra array. Just grab the array of elements from your "calendar" and loop through that:

$('#save_planning').click(function() {

  var cycleLength = $('#cycle_length').val();
  var numDays = $('.fc-day').length;

  for (var i = 0; i < numDays; i++) {
    $('.fc-day').eq(i).append($('<input>', {
      type: "checkbox",
      class: "checkbox" + ((i % cycleLength) + 1)
    }));
  }

});

td {
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>cycle</label>
<input type="text" id="cycle_length">days

<table border="1" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="fc-day" data-date="2016-4-3">03</td>
      <td class="fc-day" data-date="2016-4-4">04</td>
      <td class="fc-day" data-date="2016-4-5">05</td>
      <td class="fc-day" data-date="2016-4-6">06</td>
      <td class="fc-day" data-date="2016-4-7">07</td>
      <td class="fc-day" data-date="2016-4-8">08</td>
      <td class="fc-day" data-date="2016-4-9">09</td>
      <td class="fc-day" data-date="2016-4-10">10</td>
      <td class="fc-day" data-date="2016-4-11">11</td>
      <td class="fc-day" data-date="2016-4-12">12</td>
      <td class="fc-day" data-date="2016-4-13">13</td>
      <td class="fc-day" data-date="2016-4-14">14</td>
      <td class="fc-day" data-date="2016-4-15">15</td>
      <td class="fc-day" data-date="2016-4-16">16</td>
    </tr>
  </tbody>
</table>
<button id="save_planning">Save planning</button>

Searching the same date in table and add checkbox to td

1 Answers