点击「应用全部」按钮仅填充工作日数据的JS代码问题排查

问题诊断 #

你的代码出现以下核心问题，导致周末列也被填充：

1. 逻辑遍历错误：循环每个日期时，你会遍历整个表格的所有输入框，这意味着每个日期的判断逻辑会重复作用到所有输入框，最终所有输入框会被最后一次循环的判断覆盖，完全丢失了按对应日期td判断的逻辑。
2. 元素绑定混乱：没有将每个td的日期与该td内的输入框绑定，而是全局操作所有输入框，导致判断条件无法对应到正确的列。

修复方案 #

调整逻辑，先提取模板数据，再逐个td判断日期并处理：

修复后的JS代码 #

$('#elemento').click(function() {
  // 1. 提取第一个td的输入值作为模板（默认取第一个工作日的配置）
  const firstTdInputs = $('td:first').find('div:not(:first)');
  const templateChecks = [];
  const templateTexts = [];
  
  firstTdInputs.each(function() {
    templateChecks.push($(this).find('input[type="checkbox"]').prop('checked'));
    templateTexts.push($(this).find('input[type="text"]').val());
  });

  // 2. 遍历每个日期列（td）
  $('td').each(function() {
    // 获取当前td的日期
    const dateInput = $(this).find('input[data-day]');
    if (!dateInput.length) return;
    
    const date = new Date(dateInput.val());
    const dayOfWeek = date.getDay();
    
    // 判断是否为工作日（1-5）
    const isWeekday = dayOfWeek >= 1 && dayOfWeek <= 5;
    const tdInputs = $(this).find('div:not(:first)');
    
    tdInputs.each(function(index) {
      const checkbox = $(this).find('input[type="checkbox"]');
      const textInput = $(this).find('input[type="text"]');
      
      if (isWeekday) {
        // 工作日填充模板值
        checkbox.prop('checked', templateChecks[index]);
        textInput.val(templateTexts[index]);
      } else {
        // 周末清空（或保持初始状态，根据需求调整）
        checkbox.prop('checked', false);
        textInput.val('');
      }
    });
  });
});

HTML代码调整（修复重复id问题） #

原HTML中多个div使用了相同的id="dia4"，不符合HTML规范，建议改为class：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="elemento">Aplica a Todos </button>

<table>
  <tr>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
    <th>sunday</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  
  <tr>
    <td>
      <div class='dia'>
        <input type="checkbox" data-day='' value="2022-11-01">2022-11-01
        
        <div>
          <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Almoço (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Lanche
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Jantar (Dieta)
          <input type="text" size="10">
        </div>
        
        <div>
          <input type="checkbox">Ceia
          <input type="text" size="10">
        </div>
      </div>
    </td>
    
    <!-- 剩余td结构保持不变，仅将div的id改为class='dia' -->
    <td>
      <div class='dia'>
        <input type="checkbox" data-day='' value="2022-11-02">2022-11-02
        <!-- 内部输入框结构不变 -->
      </div>
    </td>
    <!-- 其余td省略，保持格式一致 -->
  </tr>
</table>

关键说明 #

• 模板数据提取：默认取第一个td的输入值作为要复制的模板，如果你需要指定其他列作为模板，只需修改$('td:first')为对应的选择器（比如$('td:nth-child(5)')对应周一列）。
• 周末处理：代码中默认清空周末的输入框，如果你希望保持周末的原始状态，只需删除else分支内的代码即可。

内容的提问来源于stack exchange，提问作者Bruno