金额目标表格自定义状态展示功能实现咨询

完全可以实现这两个优化需求，下面是具体的实现思路和代码示例：

核心逻辑调整步骤 #

1. 动态显示剩余金额文本 #

遍历表格行时，当总金额小于当前行的目标金额，计算差值后拼接成指定文本，替换原来的'Upcoming...'：

// 获取总金额并转为数字（去除非数字字符）
const totalMoney = parseFloat(document.getElementById('money').textContent.replace(/[^0-9.]/g, ''));
const rows = document.querySelectorAll('table tr');
// 标记是否已找到第一个未完成目标的行
let firstUncompletedFound = false;

rows.forEach(row => {
  // 获取当前行的目标金额
  const targetAmount = parseFloat(row.querySelector('.target-amount').textContent.replace(/[^0-9.]/g, ''));
  const goalCell = row.querySelector('.goal-cell');

  if (totalMoney >= targetAmount) {
    // 达标状态：添加绿色样式，显示对勾
    row.classList.add('green');
    row.classList.remove('purple', 'blue');
    goalCell.textContent = '✓';
  } else {
    // 未达标状态：计算剩余金额并显示
    const remaining = targetAmount - totalMoney;
    goalCell.textContent = `剩余€${remaining.toFixed(2)}完成目标`;
    
    // 处理第一个未完成行的样式
    if (!firstUncompletedFound) {
      row.classList.add('blue');
      row.classList.remove('purple', 'green');
      firstUncompletedFound = true;
    } else {
      row.classList.add('purple');
      row.classList.remove('blue', 'green');
    }
  }
});

2. 标记第一个未完成目标行 #

通过布尔变量firstUncompletedFound追踪状态：

• 初始设为false，表示还未找到第一个未完成的行
• 遇到第一个未达标的行时，给它添加blue类，同时将变量设为true
• 后续未达标的行则继续使用purple类

样式补充说明 #

确保你的CSS中已定义blue类的样式，示例如下：

.blue {
  background-color: #cce5ff;
  color: #004085;
}
.green {
  background-color: #d4edda;
  color: #155724;
}
.purple {
  background-color: #e2d9f3;
  color: #4a148c;
}

注意：代码中假设表格行的目标金额元素类名为target-amount，GOAL列单元格类名为goal-cell，请根据实际HTML结构调整对应的选择器。

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