如何根据输入值对HTML表格指定单元格做百分比运算修改

需求说明 #

需要根据输入框的数值，对表格指定单元格的默认值执行不同百分比的运算修改：

• 输入0 → 使用默认值
• 输入1 → 默认值增加5%
• 输入3 → 默认值增加10%
• 可按需扩展更多规则

原代码仅能关联固定值，无法基于默认值执行动态运算，且存在语法错误导致功能异常。

原代码问题分析 #

1. 函数定义语法错误：function myFunction(); 末尾多了分号，正确写法应为function myFunction() {
2. 选择器错误：document.querySelector("td-value") 缺少ID选择器前缀#，应改为document.querySelector("#td-value")
3. 无默认值持久化：没有保存初始默认值，若基于当前单元格值运算会导致多次输入后数值叠加错误
4. 硬编码逻辑：直接赋值固定值，未实现百分比运算的动态逻辑

修正后的完整代码 #

HTML代码

<!DOCTYPE html>
<html>
<body>
  <table>
    <td id="td-value">34</td>
  </table>
  <input id="input-value" oninput="myFunction()" type="number" value="0" min="0" max="15">
</body>
</html>

JavaScript代码

// 保存初始默认值，确保所有运算都基于原始值
const DEFAULT_VALUE = 34;
// 定义输入值对应的百分比增幅规则，可按需扩展
const increaseRules = {
  0: 0,    // 输入0 → 0%增幅
  1: 5,    // 输入1 → +5%
  3: 10,   // 输入3 → +10%
  5: 15,   // 可继续添加更多规则
  10: 25
};

function myFunction() {
  const inputElement = document.getElementById("input-value");
  const tdElement = document.getElementById("td-value");
  // 将输入值转为数字，默认取0
  const inputValue = parseInt(inputElement.value) || 0;
  
  // 获取对应增幅，若输入值无匹配规则则用默认值
  const increasePercent = increaseRules[inputValue] || 0;
  // 计算新值：默认值 × (1 + 增幅百分比/100)
  const newValue = DEFAULT_VALUE * (1 + increasePercent / 100);
  
  // 更新单元格内容，可根据需求保留小数位数（比如.toFixed(2)保留两位小数）
  tdElement.innerHTML = newValue;
}

// 页面加载时初始化一次
myFunction();

关键说明 #

1. 默认值持久化：用常量DEFAULT_VALUE保存初始值，避免多次输入后数值被反复修改导致偏差
2. 规则可扩展性：用对象increaseRules映射输入值和增幅百分比，新增规则只需添加键值对即可
3. 类型安全处理：将输入框的字符串值转为数字，避免非数字输入导致运算错误
4. 边界处理：若输入值不在规则中，默认使用0%增幅（即默认值）

内容的提问来源于stack exchange，提问作者Олег Черепко