如何使用jQuery编辑<td>标签内<input>元素的日期时间值并实现表格内日期时间自动更新

你的思路其实没问题，jQuery在表格里的生效逻辑和普通元素完全一致，主要需要注意两个细节：DOM加载时机和datetime-local控件的格式匹配，这两个点容易导致看起来“没生效”的错觉。

先说说你当前代码里的小问题：

• <input type="datetime-local"> 只支持24小时制格式，且精确到分钟（秒会被控件忽略），你用的 hh 是12小时制，会导致控件无法识别时间，所以格式要改成 YYYY-MM-DDTHH:mm。

下面是修正后的完整代码，同时优化了事件绑定的可靠性：

修正后的代码 #

JavaScript #

$(function() { 
  // 用change事件代替click，兼容键盘切换复选框的场景
  $('#finishedCheckbox').on('change', function() { 
    if (this.checked) {
      // 生成符合datetime-local要求的时间格式
      var time = moment().format('YYYY-MM-DDTHH:mm'); 
      $('#dateTimeFinished').val(time); 
    } else {
      // 这里预留你之后要实现的重置逻辑，比如清空或设默认值
      // $('#dateTimeFinished').val(''); 
    }
  }); 
}); 

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> 
<table> 
  <tr> 
    <td><input type="checkbox" name="finishedCheckbox" id="finishedCheckbox" value="0"></td> 
    <td><input type="datetime-local" value="" name="dateTimeFinished" id="dateTimeFinished"></td> 
  </tr> 
</table>

为什么之前的代码可能看起来没生效？ #

1. 格式不兼容：hh:mm:ss的12小时制格式不符合datetime-local控件的要求，导致时间无法正常显示，换成HH:mm就能解决。
2. 事件覆盖不全：click事件只能捕捉鼠标点击，用change事件可以覆盖键盘切换复选框的场景（比如Tab+空格），更可靠。
3. DOM加载问题：你的代码已经放在$(function() { ... })里了，这保证了DOM完全加载后才执行，所以表格里的元素肯定能被jQuery找到，这部分是没问题的。

关于你之后要实现的“取消勾选重置默认值”，只需要在else分支里给#dateTimeFinished设置对应的值即可——比如默认是空就用val('')，如果有固定默认时间就用val('2024-01-01T00:00')这类符合格式的字符串。

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