万象EXCEL开发(五)模拟excel行计算 ——东方仙盟练气期

代码

复制代码

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>商品</th>
      <th>单位</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计 (公式可自定义)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">笔记本</td>
      <td contenteditable="true">本</td>
      <td class="num" contenteditable="true">15</td>
      <td class="num" contenteditable="true">3</td>
      <td class="formula" data-formula="C1*D2">45</td>
    </tr>
    <tr>
      <td contenteditable="true">钢笔</td>
      <td contenteditable="true">支</td>
      <td class="num" contenteditable="true">25</td>
      <td class="num" contenteditable="true">2</td>
      <td class="formula" data-formula="C2*D2">50</td>
    </tr>
    <tr>
      <td contenteditable="true">橡皮</td>
      <td contenteditable="true">块</td>
      <td class="num" contenteditable="true">2</td>
      <td class="num" contenteditable="true">10</td>
      <td class="formula" data-formula="C3*D3">20</td>
    </tr>
  </tbody>
</table>

<script>
// 模拟Excel公式解析与依赖更新逻辑
document.addEventListener('input', function(e) {
  // 若修改的是单价或数量（数字列）
  if (e.target.classList.contains('num')) {
    const row = e.target.closest('tr'); // 当前行
    const rowIndex = Array.from(row.parentElement.children).indexOf(row) + 1; // 行号（1开始）
    const priceCell = row.querySelector('td:nth-child(3)'); // 单价单元格（C列）
    const qtyCell = row.querySelector('td:nth-child(4)'); // 数量单元格（D列）
    const subtotalCell = row.querySelector('.formula'); // 小计单元格（E列）
    
    // 读取自定义公式（从data-formula获取，支持修改）
    const formula = subtotalCell.dataset.formula; 
    // 替换公式中的单元格引用（如C1→价格值，D1→数量值）
    const parsedFormula = formula
      .replace(/C(\d+)/, priceCell.textContent)
      .replace(/D(\d+)/, qtyCell.textContent);
    
    // 计算结果并更新
    subtotalCell.textContent = eval(parsedFormula); 
  }
  
  // 若修改的是小计列的公式（双击可编辑公式）
  if (e.target.classList.contains('formula') && e.target.isContentEditable) {
    const formula = e.target.textContent;
    e.target.dataset.formula = formula; // 保存自定义公式
    // 触发一次计算更新
    const row = e.target.closest('tr');
    const price = row.querySelector('td:nth-child(3)').textContent;
    const qty = row.querySelector('td:nth-child(4)').textContent;
    e.target.textContent = eval(formula.replace(/C(\d+)/, price).replace(/D(\d+)/, qty));
  }
});

// 允许双击小计单元格编辑公式（模拟Excel编辑栏）
document.querySelectorAll('.formula').forEach(cell => {
  cell.addEventListener('dblclick', function() {
    this.contentEditable = true;
    this.focus();
  });
  cell.addEventListener('blur', function() {
    this.contentEditable = false;
  });
});
</script>

逻辑

处理数字单元格的变化：

javascript
复制代码
```
if (e.target.classList.contains('num')) {
```
这部分代码检查触发事件的目标元素（e.target）是否包含 num 类。如果包含，说明用户可能修改了一个与计算相关的数字单元格。

javascript
复制代码
```
const row = e.target.closest('tr'); // 当前行
const rowIndex = Array.from(row.parentElement.children).indexOf(row) + 1; // 行号（1开始）
const priceCell = row.querySelector('td:nth-child(3)'); // 单价单元格（C列）
const qtyCell = row.querySelector('td:nth-child(4)'); // 数量单元格（D列）
const subtotalCell = row.querySelector('.formula'); // 小计单元格（E列）
```
- e.target.closest('tr')：找到目标元素最近的祖先 <tr> 元素，即当前行。
- Array.from(row.parentElement.children).indexOf(row) + 1：获取当前行在所有行中的索引，并加 1 以得到从 1 开始的行号。
- row.querySelector('td:nth-child(3)')：选取当前行的第 3 个 <td> 元素，即单价所在单元格。
- row.querySelector('td:nth-child(4)')：选取当前行的第 4 个 <td> 元素，即数量所在单元格。
- row.querySelector('.formula')：选取当前行中具有 formula 类的元素，即小计单元格。
javascript
复制代码
```
const formula = subtotalCell.dataset.formula; 
const parsedFormula = formula
 .replace(/C(\d+)/, priceCell.textContent)
 .replace(/D(\d+)/, qtyCell.textContent);
```
- subtotalCell.dataset.formula：从 subtotalCell 的 data - formula 属性中获取自定义公式。这个属性允许用户定义如何计算小计。
- formula.replace(/C(\d+)/, priceCell.textContent)：将公式中类似 C1、C2 等的单元格引用替换为实际的单价文本内容。/C(\d+)/ 是一个正则表达式，匹配以 C 开头，后面跟着一个或多个数字的字符串。
- replace(/D(\d+)/, qtyCell.textContent)：同样，将公式中类似 D1、D2 等的单元格引用替换为实际的数量文本内容。
javascript
复制代码
```
subtotalCell.textContent = eval(parsedFormula); 
```
使用 eval 函数计算替换后的公式，并将结果更新到小计单元格的文本内容中。eval 会执行传入的字符串形式的表达式，并返回结果。
处理小计单元格公式的修改：

javascript
复制代码
```
if (e.target.classList.contains('formula') && e.target.isContentEditable) {
```
这部分代码检查触发事件的目标元素是否包含 formula 类，并且该元素是可编辑的。如果满足条件，说明用户正在修改小计单元格的计算公式。

javascript
复制代码
```
const formula = e.target.textContent;
e.target.dataset.formula = formula; 
```
- e.target.textContent：获取用户输入的新公式。
- e.target.dataset.formula = formula：将新公式保存到 data - formula 属性中，以便后续使用。
javascript
复制代码
```
const row = e.target.closest('tr');
const price = row.querySelector('td:nth-child(3)').textContent;
const qty = row.querySelector('td:nth-child(4)').textContent;
e.target.textContent = eval(formula.replace(/C(\d+)/, price).replace(/D(\d+)/, qty));
```
- e.target.closest('tr')：找到包含当前小计单元格的行。
- row.querySelector('td:nth-child(3)').textContent：获取当前行的单价文本内容。
- row.querySelector('td:nth-child(4)').textContent：获取当前行的数量文本内容。
- eval(formula.replace(/C(\d+)/, price).replace(/D(\d+)/, qty))：用实际的单价和数量替换公式中的单元格引用，并使用 eval 计算结果，然后更新小计单元格的文本内容。

Excel 中列与列之间的关联计算（如 C=A+B、G=C+D 等）能实时同步更新，且不会频繁卡死，核心依赖两大机制：精准的依赖追踪 和高效的计算引擎，具体原理如下：

关联更新的底层逻辑："依赖链"+"增量计算"

构建依赖关系网 当你在 Excel 中输入 C1=A1+B1 并下拉应用到整列时，Excel 会自动记录一套 "依赖关系"：
- 列 C 的所有单元格 "依赖" 列 A 和列 B 的对应单元格（如 C2 依赖 A2 和 A2，C3 依赖 A3 和 B3 等）；
- 若后续设置 G1=C1+D1，则列 G 又 "依赖" 列 C 和列 D，形成一条依赖链 （A/B → C → G）。
这套关系网被 Excel 实时保存在内存中，类似一张 "数据关联地图"。
只算 "被影响的部分" 当某个单元格（如 A1）被修改时，Excel 不会重新计算所有单元格，而是通过依赖网快速定位 "受影响的范围"：
- 先找到直接依赖 A1 的单元格（如 C1）；
- 再找到依赖 C1 的单元格（如 G1）；
- 最终只重新计算 C1 和 G1，其他无关单元格（如 C2、G2）完全不参与计算。
这种 "增量更新" 机制，确保即使有上百列关联，也只会计算真正需要变动的部分，效率极高。

避免卡死的关键：优化计算规则 + 资源管控

区分 "自动重算" 和 "手动重算" Excel 默认开启 "自动重算"（对简单关联实时更新），但允许用户手动切换为 "手动重算"（按 F9 才更新）。对于超复杂的关联（如嵌套多层函数、跨工作表引用），用户可手动触发计算，避免频繁自动更新占用资源。
限制单次计算的 "深度" 和 "广度"
- 若依赖链过长（如 A→B→C→...→Z），Excel 会按 "从左到右、从上到下" 的顺序分层计算，避免一次性加载过多任务；
- 对整列公式（如 C=A+B 应用到 10 万行），Excel 会按 "块" 分批计算（如每次算 1 万行），避免瞬间占用过多内存。
忽略 "无效关联" 若某列公式引用了空白单元格（如 C1=A1+B1 中 A1 或 B1 为空），Excel 会直接返回空值，不执行无效计算；若公式存在错误（如循环引用 A1=B1 且 B1=A1），会立即报错并停止计算，避免死循环。

为什么很少卡死？

日常使用中，Excel 处理几千行、几十列的关联计算很少卡顿，原因在于：

大部分关联是 "简单计算"：加减乘除、求和等基础运算对计算机资源消耗极低，即使关联多，单次计算耗时也可忽略；
内存高效管理：依赖关系网和临时计算结果都存储在内存中，且会定期释放无用数据（如删除的列、清空的公式）；
硬件适配：现代计算机的 CPU 和内存性能，足以应对 Excel 常规的关联计算压力（极端场景如几十万行 + 多层嵌套函数才可能卡顿，此时可手动重算或拆分表格）。

总结

Excel 的关联更新本质是 "精准追踪依赖 + 只算必要部分"，通过轻量化的依赖网和增量计算，既保证了实时同步，又避免了资源浪费。这也是为什么即使有 C=A+B、G=C+D 等多层关联，日常使用中也很少出现卡死 ------ 它只在 "必须更新的地方" 花力气，而非盲目全量重算

阿雪技术观

让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量

Embrace open source and sharing, witness the miracle of technological progress, and enjoy the happy times of humanity! Let's actively join the wave of technology sharing. Not only as beneficiaries, but also as contributors. Whether sharing our own code, writing technical blogs, or participating in the maintenance and improvement of open source projects, every small action may become a huge force driving technological progrss.