如何在JavaScript中获取最近text类型input值及计算表格时间差

看起来你卡在了如何精准获取每行的两个时间值并计算差值上——这其实是个很常见的表格行内元素交互问题，核心是要把每个时间选择器和它所在的行绑定起来，避免跨行混淆。我给你一套完整的可运行方案，直接套用就行：

第一步：完善表格结构（给元素加类名） #

首先给你的时间选择器和差值单元格加上统一的类名，这样方便我们通过DOM定位到同一行的对应元素：

<table id="example1" class="machinetable" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Sr. no.</th>
      <th>Machine Name</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Time Difference</th>
    </tr>
  </thead>
  <tbody>
    <!-- 示例行1 -->
    <tr>
      <td>1</td>
      <td>Machine A</td>
      <td><input type="time" class="start-time"></td>
      <td><input type="time" class="end-time"></td>
      <td class="time-diff"></td>
    </tr>
    <!-- 示例行2 -->
    <tr>
      <td>2</td>
      <td>Machine B</td>
      <td><input type="time" class="start-time"></td>
      <td><input type="time" class="end-time"></td>
      <td class="time-diff"></td>
    </tr>
    <!-- 可以动态添加更多行 -->
  </tbody>
</table>

第二步：编写JavaScript逻辑（绑定事件+计算差值） #

用事件委托的方式绑定事件，不管是静态行还是后续动态添加的行，都能正常触发计算。核心是通过closest('tr')快速定位当前输入框所在的行，确保只处理同一行的时间值：

// 给表格绑定事件委托，监听所有时间选择器的变化
document.getElementById('example1').addEventListener('change', function(e) {
  // 只处理开始/结束时间的输入框
  if (!['start-time', 'end-time'].includes(e.target.classList[0])) return;

  // 获取当前输入框所在的行
  const currentRow = e.target.closest('tr');
  
  // 提取同一行的两个时间值
  const startTime = currentRow.querySelector('.start-time').value;
  const endTime = currentRow.querySelector('.end-time').value;

  // 只有两个时间都填写了才计算差值
  if (startTime && endTime) {
    // 把时间字符串转为Date对象（用同一个基准日期，只比较时间部分）
    const startDate = new Date(`2024-01-01T${startTime}`);
    const endDate = new Date(`2024-01-01T${endTime}`);

    // 计算时间差（毫秒），处理跨天情况（比如23:00到次日01:00）
    let diffMs = endDate - startDate;
    if (diffMs < 0) diffMs += 24 * 60 * 60 * 1000;

    // 转换为小时+分钟的格式
    const hours = Math.floor(diffMs / (1000 * 60 * 60));
    const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));

    // 更新当前行的差值单元格
    currentRow.querySelector('.time-diff').textContent = `${hours}h ${minutes}m`;
  } else {
    // 如果有一个时间没填，清空差值显示
    currentRow.querySelector('.time-diff').textContent = '';
  }
});

关键知识点说明 #

1. 行定位：closest('tr')是核心——它能快速找到当前元素最近的父级<tr>，确保我们只操作当前行的时间选择器和差值单元格，不会和其他行的元素搞混。
2. 事件委托：把事件绑定在表格上，而不是每个输入框上，这样即使后续通过JS动态添加行，新的时间选择器也能自动触发计算逻辑。
3. 时间处理：用同一个基准日期（比如2024-01-01）来创建Date对象，这样只比较时间部分；如果结束时间早于开始时间，默认按跨天处理，加上一天的毫秒数。
4. 容错处理：只有当两个时间都填写完整时才计算，否则清空差值，避免显示NaN或者错误结果。

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