如何用JS实现添加新行时基于日期和学生更新餐费余额？

不用依赖数据库存数据再取，直接在前端维护每个学生每天的余额状态就行，核心思路是用一个对象记录当前每个学生单日的剩余余额，添加新行时直接从这个对象里拿数据计算，同时更新状态。给你写个完整的示例：

1. 先搭好HTML结构 #

<!-- 输入区域，用来填新增行的信息 -->
<div>
  <label>日期：<input type="date" id="dayInput"></label>
  <label>学生姓名：<input type="text" id="nameInput"></label>
  <label>本次消费：<input type="number" id="creditUsedInput" min="0"></label>
  <button id="addRowBtn">Add row</button>
</div>

<!-- 餐费表格 -->
<table id="foodCreditTable" border="1">
  <thead>
    <tr>
      <th>Day</th>
      <th>Student Name</th>
      <th>Student Food Credit Used</th>
      <th>Student Food Credit</th>
    </tr>
  </thead>
  <tbody>
    <!-- 新增行会插入到这里 -->
  </tbody>
</table>

2. 写JavaScript逻辑 #

// 用对象存储每个学生每天的当前余额，键格式是「学生名_日期」，初始余额100
const studentDailyBalances = {};

// 获取DOM元素
const addRowBtn = document.getElementById('addRowBtn');
const tableBody = document.getElementById('foodCreditTable').querySelector('tbody');
const dayInput = document.getElementById('dayInput');
const nameInput = document.getElementById('nameInput');
const creditUsedInput = document.getElementById('creditUsedInput');

// 添加行的核心函数
addRowBtn.addEventListener('click', function() {
  // 先获取输入值，做基础校验
  const day = dayInput.value.trim();
  const studentName = nameInput.value.trim();
  const creditUsed = parseFloat(creditUsedInput.value);

  if (!day || !studentName || isNaN(creditUsed) || creditUsed < 0) {
    alert('请填写有效的日期、姓名和消费金额');
    return;
  }

  // 生成唯一键，用来定位该学生当天的余额
  const key = `${studentName}_${day}`;
  // 获取当前余额：如果是第一次添加，用初始值100，否则用之前记录的余额
  let currentBalance = studentDailyBalances[key] || 100;
  // 计算新余额，注意不能小于0（可选，根据需求调整）
  const newBalance = Math.max(currentBalance - creditUsed, 0);

  // 创建新行
  const newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td>${day}</td>
    <td>${studentName}</td>
    <td>${creditUsed.toFixed(2)}</td>
    <td>${newBalance.toFixed(2)}</td>
  `;

  // 插入表格
  tableBody.appendChild(newRow);

  // 更新余额状态
  studentDailyBalances[key] = newBalance;

  // 清空输入框，方便下次输入
  creditUsedInput.value = '';
});

关键说明 #

• studentDailyBalances这个对象就是前端的“临时数据库”，专门存每个学生每天的实时余额，不用等存到后端数据库就能用。
• 每次点击Add row时，先校验输入的合法性，避免无效数据。
• 用学生名_日期作为键，确保同一学生同一天的余额是连续计算的，不同日期或不同学生互不干扰。
• 如果需要允许负数余额，把Math.max(...)去掉就行，直接用currentBalance - creditUsed。

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