Aynı tarihte tabloyu aramak ve td'ye eklemek için onay kutusunu işaretleyin

Question

Başlangıçta bir antrenman programı yapmak zorundayım, başlangıçta antrenman süresini tanımlamak ve aynı egzersiz döngüsünü kaç gün sürdüğümüzü belirtmem gerekiyor. bu yüzden takvimimi gösteren bir tablo ve eğitim tarihlerini belirttiğim bir dizi var. Bu diziden geçmek ve masada aynı tarihi aramak zorundayım. üç günlük bir döngü için, örneğin, bir eşleşme bulduğum her defasında, bir sonraki td'de .checkbox1 .checkbox2 ile bu td'de bir onay kutusu eklemem gerekir. sorunu, döngü girdisine 3 koyarsam, her td'de 3 onay kutusu göstermesidir. İlk td sınıfında bir .checkbox1 ve bir sonraki td sınıfında .checkbox2 ve üçüncü bir sınıf .checkbox3 ve bir sonraki sınıfın sadece bir onay kutusu istiyorum. Sınıf bir .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++){ 
 
\t console.log(rangeArray[i]); 
 
\t for (var j = 0; j < cycleLength; j++){ \t \t \t \t \t \t 
 
\t  $('.fc-day[data-date="' + rangeArray[i] + '"]').append($('<input>', { type:"checkbox", class:"checkbox"+j})); 
 
\t } 
 
\t }; 
 
});

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>

Answer 1

bu deneyin. Birden fazla döngüye veya fazladan bir diziye gerek yoktur. Sadece bu aracılığıyla "takvimde" ve döngüden elemanları dizisini kapmak:

$('#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>