JavaScript实现用户输入与动态表格行值校验及备注必填控制

关键问题修正与实现思路 #

因为表格是动态循环生成的多行结构，不能直接绑定单个元素事件，核心思路是通过输入框定位所在行，再获取该行内的系统值，具体步骤：

1. 遍历所有用户输入框，为每个输入框单独绑定输入事件
2. 事件触发时，精准定位当前输入框所属的表格行
3. 从该行提取系统提供的.value1单元格内容
4. 比较用户输入值与系统值，动态控制对应备注框的required属性

修改后的完整代码 #

<tbody>
  <?php
  foreach ($result as $key => $value) {
    echo "<tr>";
    echo "<td class='value1'>".$value[1]."</td>";
    echo "<td><input type='number' class='inputuser' required value=''> ".$value[2]."</td>";
    echo "<td><input type='text' class='note'></td></tr>";
  }
  ?>
</tbody></table>
<button type="submit" id="approve">approve</button>
</div></form>

<script>
$(document).ready(function() {
  // 遍历所有用户输入框，绑定输入事件
  $('.inputuser').each(function() {
    $(this).on('input', function() {
      // 获取当前输入框所在的表格行
      const row = $(this).closest('tr');
      // 获取该行的系统值，转成数字类型匹配输入框类型
      const systemValue = parseFloat(row.find('.value1').text().trim());
      // 获取当前输入框的值
      const userInput = parseFloat($(this).val());
      // 获取该行对应的备注框
      const noteInput = row.find('.note');

      // 比较值：输入有效且与系统值不等时，要求必填备注
      if (!isNaN(userInput) && userInput !== systemValue) {
        noteInput.prop('required', true);
      } else {
        noteInput.prop('required', false);
      }
    });
  });
});
</script>

代码关键点说明 #

• 修复HTML结构：原代码中备注输入框所在<td>未闭合，已补充</td>标签
• 精准行定位：用$(this).closest('tr')锁定当前输入框所属行，避免跨行取值错误
• 类型统一处理：将系统文本值和用户输入值转为float类型，避免字符串与数字比较的误差
• 空值判断：用isNaN(userInput)识别用户未输入的情况，此时不强制要求填写备注
• 属性控制优化：用jQuery的prop()方法设置required属性，比原生setAttribute更适配表单元素操作

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