javascript - 在表中搜索相同的日期并将复选框添加到 td

Question

我必须做一个训练计划，一开始我必须定义训练周期以及你应该进行多少天的相同锻炼周期。所以我有一个代表我的日历的表格和一个用于放置培训日期的数组。我必须遍历这个数组并在表中查找相同的日期。例如，对于一个三天的周期，每次我找到一个匹配项时，我都必须在这个 td 中添加一个复选框，类为 .checkbox1 然后是 .checkbox2 在下一个 td 然后是 .checkbox3 直到训练期结束。问题是，如果我在循环输入中输入 3，它会在每个 td 中显示 3 个复选框。我只希望在第一个 td 中有一个带有 .checkbox1 类的复选框，在下一个 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>