在表中搜索相同的日期，并在td中添加复选框

Searching the same date in table and add checkbox to td

本文关键字：并在 td 添加 复选框 日期 搜索      更新时间：2024-06-06

我必须制定一个训练计划，一开始我必须定义训练周期，以及你应该在同一锻炼周期内锻炼多少天。所以我有一个表来表示我的日历，还有一个数组来表示训练日期。我必须遍历这个数组，并在表中查找相同的日期。例如，在三天的周期中，每次我找到匹配项时，我都必须在这个td中添加一个复选框，并在下一个td中添加class.checkbox1.checkbox2.checkbox3.checkbox3，直到训练期结束。问题是，如果我在循环中输入3个，它会在每个td中显示3个复选框。我只想在第一个td中有一个带有class.checkx1的复选框，在下一个td中是带有class.ccheckx2的复选框；在第三个td中，是带有class.checkx3的复选框。下一个应该是.checkx1…

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

试试这个。不需要多个循环或额外的数组。只需从您的"日历"中获取元素数组并循环浏览即可：

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

相关文章：