HTML表格surplus/deficiency字段非00:00时单独变色方案咨询

嘿，我来帮你搞定这个需求！针对你说的「surplus和deficiency列中单个字段值非00:00时单独变色、不用id」的要求，我们可以通过类选择器+动态样式切换来实现，完全不需要给每个元素加id，不管多少行都能轻松适配。

第一步：添加变色样式 #

首先定义一个CSS类，用来标记非零值的样式（颜色、字体粗细都可以自定义）：

/* 自定义非零值的视觉样式，你可以根据需求修改颜色/字体 */
.non-zero-value {
  color: #dc3545; /* 红色示例 */
  font-weight: bold;
}

第二步：修改JavaScript逻辑 #

在你原有计算逻辑的基础上，加入样式切换的判断——每次更新surplus/deficiency的值后，检查它是否为00:00，动态添加或移除样式类：

function diff(start, end) {
  start = start.split(":");
  end = end.split(":");
  const startDate = new Date(0, 0, 0, start[0], start[1], 0);
  const endDate = new Date(0, 0, 0, end[0], end[1], 0);
  let diff = endDate.getTime() - startDate.getTime();
  const hours = Math.floor(diff / 1000 / 60 / 60);
  diff -= hours * 1000 * 60 * 60;
  const minutes = Math.floor(diff / 1000 / 60);
  return (hours <= 9 ? "0" : "") + hours + ":" + (minutes <= 9 ? "0" : "") + minutes;
}

function diffMs(start, end) {
  // 用于逻辑判断的差值计算
  return +start.split(":").join('') - +end.split(":").join('');
}

document.querySelector('table').addEventListener('change', function(e) {
  const classList = e.target.classList;
  if (classList.contains('start') || classList.contains('end')) {
    const tr = e.target.parentNode.parentNode;
    // 通过类名获取当前行的所有输入框，完全不用依赖id
    const [start, end, actual, normative, surplus, deficiency] = [...tr.querySelectorAll('.start,.end,.actual,.normative,.surplus,.deficiency')];
    
    const actualValue = diff(start.value, end.value);
    actual.value = actualValue;
    
    const diffValue = diffMs(actualValue, normative.value);
    
    // 处理surplus字段的数值与样式
    if (diffValue >= 0) {
      surplus.value = diff(normative.value, actualValue);
      // 用toggle自动判断：值非00:00时加样式，否则移除
      surplus.classList.toggle('non-zero-value', surplus.value !== '00:00');
      deficiency.classList.remove('non-zero-value'); // 清空另一个字段的样式
    } else {
      surplus.value = '00:00';
      surplus.classList.remove('non-zero-value');
    }
    
    // 处理deficiency字段的数值与样式
    if (diffValue <= 0) {
      deficiency.value = diff(actualValue, normative.value);
      deficiency.classList.toggle('non-zero-value', deficiency.value !== '00:00');
      surplus.classList.remove('non-zero-value'); // 清空另一个字段的样式
    } else {
      deficiency.value = '00:00';
      deficiency.classList.remove('non-zero-value');
    }
  }
});

第三步：HTML保持原样（无需id） #

你的HTML代码可以完全保留，甚至可以删除所有id属性（因为我们已经用类名来定位元素了）：

<table>
  <thead>
    <tr>
      <th>start</th>
      <th>end</th>
      <th>actual</th>
      <th>normative</th>
      <th>surplus</th>
      <th>deficiency</th>
    </tr>
  </thead>
  <tbody>
    <tr class="day">
      <td><input type="time" class="start" value="08:00"></td>
      <td><input type="time" class="end" value="15:00"></td>
      <td><input type="time" class="actual" value="07:00" readonly></td>
      <td><input type="time" class="normative" value="08:00" readonly></td>
      <td><input type="time" class="surplus" value="00:00" readonly></td>
      <td><input type="time" class="deficiency" value="00:00" readonly></td>
    </tr>
    <tr class="day">
      <td><input type="time" class="start" value="08:00"></td>
      <td><input type="time" class="end" value="17:00"></td>
      <td><input type="time" class="actual" value="09:00" readonly></td>
      <td><input type="time" class="normative" value="08:00" readonly></td>
      <td><input type="time" class="surplus" value="00:00" readonly></td>
      <td><input type="time" class="deficiency" value="00:00" readonly></td>
    </tr>
    <!-- 新增行直接复制上面的tr结构即可，无需修改任何属性 -->
  </tbody>
</table>

核心亮点说明 #

• 完全摆脱id依赖：所有元素定位都通过类名和DOM遍历实现，不管你有30行还是100行，直接复制tr结构就能用
• 精准控制单个字段：只给非00:00的字段加样式，不会影响整列其他元素
• 自动样式切换：用classList.toggle()方法简化逻辑，无需写复杂的if/else判断添加/移除类

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