HTML前端数学运算及租赁库存表数值更新方案咨询

1. 仅用HTML能否实现数学运算和页面更新？ #

不行。HTML只是标记语言，仅负责页面结构的展示，没有逻辑计算、事件处理或动态更新页面内容的能力。必须搭配JavaScript来处理运算和页面更新逻辑。

2. 库存租赁表的实现方案 #

技术选择 #

• 核心用原生JavaScript（不需要JQuery，现在原生API足够简洁高效）
• 若需要持久化数据（刷新页面后数据不丢失），才需要用到存储方案（比如浏览器本地的localStorage，或者后端的SQL数据库）；JSON只是数据格式，用来传递/存储数据，不是必须的核心技术。

具体实现代码 #

HTML结构（表格布局）

<table border="1">
  <thead>
    <tr>
      <th>物品类型</th>
      <th>IN STOCK</th>
      <th>RENTED</th>
      <th>调整数量</th>
    </tr>
  </thead>
  <tbody>
    <!-- 示例物品1：笔记本电脑 -->
    <tr data-item="laptop">
      <td>笔记本电脑</td>
      <td class="stock">10</td>
      <td class="rented">3</td>
      <td>
        <input type="number" class="adjust-input" step="1">
        <button class="submit-btn">提交</button>
      </td>
    </tr>
    <!-- 示例物品2：投影仪 -->
    <tr data-item="projector">
      <td>投影仪</td>
      <td class="stock">5</td>
      <td class="rented">2</td>
      <td>
        <input type="number" class="adjust-input" step="1">
        <button class="submit-btn">提交</button>
      </td>
    </tr>
  </tbody>
</table>

JavaScript逻辑（处理提交和运算）

// 给所有提交按钮绑定点击事件
document.querySelectorAll('.submit-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前按钮所在的表格行及相关元素
    const row = this.closest('tr');
    const stockElement = row.querySelector('.stock');
    const rentedElement = row.querySelector('.rented');
    const input = row.querySelector('.adjust-input');
    
    // 解析数值，确保是有效数字
    let stock = parseInt(stockElement.textContent);
    let rented = parseInt(rentedElement.textContent);
    const number = parseInt(input.value);
    
    // 空输入或非数字直接提示并返回
    if (isNaN(number)) {
      alert('请输入有效的数字');
      input.value = '';
      return;
    }
    
    // 执行你的业务逻辑
    if (number > 0) {
      stock += number;
      rented -= number;
      if (rented < 0) {
        stock += Math.abs(rented);
        rented = 0;
      }
    } else if (number < 0) {
      const absNum = Math.abs(number);
      stock -= absNum;
      rented += absNum;
      if (stock < 0) {
        stock = 0;
      }
    }
    
    // 更新页面显示
    stockElement.textContent = stock;
    rentedElement.textContent = rented;
    // 清空输入框
    input.value = '';
  });
});

关键说明 #

• JavaScript里的绝对值函数是Math.abs()，对应你逻辑里的abs()
• 用closest('tr')精准获取当前按钮所在的行，确保每一行的操作互不干扰
• 用textContent读取和更新表格单元格的数值
• 如果需要数据持久化（刷新页面后库存数据不丢失），可以把数据存在浏览器的localStorage里，示例如下：

// 页面加载时读取本地存储的数据
window.addEventListener('load', function() {
  const savedData = localStorage.getItem('inventoryData');
  if (savedData) {
    const data = JSON.parse(savedData);
    // 遍历数据更新表格
    Object.keys(data).forEach(itemKey => {
      const row = document.querySelector(`tr[data-item="${itemKey}"]`);
      if (row) {
        row.querySelector('.stock').textContent = data[itemKey].stock;
        row.querySelector('.rented').textContent = data[itemKey].rented;
      }
    });
  }
});

// 在之前的JavaScript逻辑中，更新页面后添加保存数据的代码：
// ...（原更新页面的代码）
stockElement.textContent = stock;
rentedElement.textContent = rented;
// 保存数据到localStorage
const itemKey = row.getAttribute('data-item');
const inventoryData = JSON.parse(localStorage.getItem('inventoryData')) || {};
inventoryData[itemKey] = { stock, rented };
localStorage.setItem('inventoryData', JSON.stringify(inventoryData));
// ...

总结 #

• 必须用JavaScript处理运算和页面更新，HTML仅负责页面结构
• 不需要JQuery，原生JS完全满足需求
• SQL/JSON只有在需要持久化到后端或复杂数据交互时才需要，本地小应用用localStorage即可

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