在表中搜索同一日期并将复选框添加到td中。

Question

我必须做一个训练计划，在开始的时候，我必须确定训练的时间和多少天，你应该采取相同的锻炼周期。因此，我有一个表，表示我的日历和数组，我把训练日期放在其中。我必须遍历这个数组，并在表中查找相同的日期。例如，对于三天的周期，每次我发现匹配时，我都必须在这个td中添加一个复选框，其中包含类.checkbox1，然后在下一个td中添加.checkbox2，然后在.checkbox3中添加一个复选框，直到培训结束。问题是，如果我在循环输入中输入3，它会在每个td中显示3个复选框。我只想要一个带有类.checkbox1的复选框，在第一个td中，在下一个td中，一个带有类.checkbox2的复选框，在第三个是一个带有类.checkbox3的复选框，下一个类应该是.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>

​

Answer 1

尝尝这个。不需要多个循环或额外的数组。只需从“日历”中获取元素数组并循环执行：

​

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

​