如何在输入数字总和不等于8时显示错误按钮（PHP生成表格场景）

嘿，这个需求不难实现！核心就是用JavaScript实时监听输入框的变化，计算每行的数值总和，然后根据总和是否等于8来控制错误按钮的显示状态。我给你一步步拆解：

首先，在PHP循环生成的每个.new_row行里，添加一个默认隐藏的错误按钮（建议放在最后一列），同时把所有需要计算的输入框统一一个类名（比如position-input），这样后续JS更容易批量处理：

<tr class="new_row">
  <td>employee 1</td>
  <td><input class="position-input" type="number" value="8" placeholder="8" step="1"/></td>
  <td><input class="position-input" type="number" value="0" placeholder="0" step="1"/></td>
  <!-- 这里可以继续添加更多输入框 -->
  <td><button class="error-btn" style="display: none;">总和错误！</button></td>
</tr>

小提示：我把输入框类型改成了type="number"，还加了step="1"，这样能限制用户只能输入整数，避免非数字内容干扰计算。

我们需要做两件关键的事：页面加载时初始化检查所有行，以及监听输入框的实时变化来更新检查结果。代码如下：

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有目标行
  const allRows = document.querySelectorAll('.new_row');
  
  // 先检查一遍所有行的总和状态
  allRows.forEach(checkRowSum);
  
  // 给所有输入框绑定输入事件
  const allInputs = document.querySelectorAll('.position-input');
  allInputs.forEach(input => {
    input.addEventListener('input', function() {
      // 找到当前输入框所在的行
      const currentRow = this.closest('.new_row');
      // 检查当前行的总和
      checkRowSum(currentRow);
    });
  });
  
  // 定义核心的行总和检查函数
  function checkRowSum(row) {
    const inputs = row.querySelectorAll('.position-input');
    let total = 0;
    
    // 遍历输入框计算总和，处理空值/非数字的情况
    inputs.forEach(input => {
      // 把输入值转成数字，无效值按0计算
      const numValue = parseFloat(input.value) || 0;
      total += numValue;
    });
    
    // 获取当前行的错误按钮
    const errorBtn = row.querySelector('.error-btn');
    
    // 根据总和是否等于8控制按钮显示
    if (total !== 8) {
      errorBtn.style.display = 'inline-block';
    } else {
      errorBtn.style.display = 'none';
    }
  }
});

为了让错误提示更醒目，可以给按钮加一点CSS样式：

.error-btn {
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

这样不管是页面刚加载，还是用户修改输入框内容，都会实时计算每行的数值总和，只要总和不是8，对应的错误按钮就会显示出来啦！

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