Bootstrap+jQuery汽车经销商销售统计：平均销售额计算异常排查

问题场景 #

基于Bootstrap 5与jQuery开发的汽车经销商销售统计页面，核心需求如下：

• 通过表格录入3名销售代表的4个季度销售额，存储为二维数组
• 点击计算按钮后展示三类数据：
  1. 各季度总销售额（已正常实现）
  2. 每位销售代表的平均销售额（功能失效，对应的readonly输入框无值）
  3. 各季度销售额最高的代表（已正常实现）

常见失效原因排查 #

平均销售额功能失效通常源于以下几点：

• 数据类型错误：读取输入框值时未转换为数字，导致字符串拼接而非数值相加，最终得到NaN
• 遍历逻辑错误：遍历二维数组时方向颠倒（比如遍历季度而非销售代表），未累加当前代表的所有季度数据
• 选择器不匹配：代码中目标输入框的ID选择器与实际HTML中的ID不一致，导致赋值失败
• 空值未处理：输入框为空时未默认赋值0，引发NaN计算结果

修复后的完整代码示例 #

HTML结构（示例） #

<!-- 销售额录入表格 -->
<table class="table table-bordered">
  <thead>
    <tr>
      <th>销售代表</th>
      <th>Q1</th>
      <th>Q2</th>
      <th>Q3</th>
      <th>Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr class="sales-row">
      <td>代表1</td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
    </tr>
    <tr class="sales-row">
      <td>代表2</td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
    </tr>
    <tr class="sales-row">
      <td>代表3</td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
      <td><input type="number" class="form-control sales-input" min="0"></td>
    </tr>
  </tbody>
</table>

<!-- 统计结果展示 -->
<div class="mt-4">
  <h5>季度总销售额</h5>
  Q1: <input type="text" readonly class="form-control w-25 d-inline" id="q1-total">
  Q2: <input type="text" readonly class="form-control w-25 d-inline" id="q2-total">
  Q3: <input type="text" readonly class="form-control w-25 d-inline" id="q3-total">
  Q4: <input type="text" readonly class="form-control w-25 d-inline" id="q4-total">

  <h5 class="mt-3">销售代表平均销售额</h5>
  代表1: <input type="text" readonly class="form-control w-25 d-inline" id="rep1-average">
  代表2: <input type="text" readonly class="form-control w-25 d-inline" id="rep2-average">
  代表3: <input type="text" readonly class="form-control w-25 d-inline" id="rep3-average">

  <h5 class="mt-3">季度最高销售额代表</h5>
  Q1: <input type="text" readonly class="form-control w-25 d-inline" id="q1-top-rep">
  Q2: <input type="text" readonly class="form-control w-25 d-inline" id="q2-top-rep">
  Q3: <input type="text" readonly class="form-control w-25 d-inline" id="q3-top-rep">
  Q4: <input type="text" readonly class="form-control w-25 d-inline" id="q4-top-rep">

  <button type="button" class="btn btn-primary mt-3" id="calculate-btn">计算统计数据</button>
</div>

jQuery逻辑（修复版） #

function calculateStats() {
  // 初始化二维数组存储销售额
  let salesData = [];

  // 读取表格数据，转换为数字类型并处理空值
  $('.sales-row').each(function(repIndex) {
    salesData[repIndex] = [];
    $(this).find('.sales-input').each(function(quarterIndex) {
      // 转换为数字，空值默认0
      salesData[repIndex][quarterIndex] = parseInt($(this).val()) || 0;
    });
  });

  // 计算各季度总销售额（保留原有正确逻辑）
  for (let q = 0; q < 4; q++) {
    let quarterTotal = 0;
    for (let r = 0; r < 3; r++) {
      quarterTotal += salesData[r][q];
    }
    $(`#q${q+1}-total`).val(quarterTotal);
  }

  // 修复后的销售代表平均销售额计算
  for (let r = 0; r < 3; r++) {
    let repTotal = 0;
    // 累加当前代表的4个季度销售额
    for (let q = 0; q < 4; q++) {
      repTotal += salesData[r][q];
    }
    // 计算平均值并保留2位小数
    let repAverage = (repTotal / 4).toFixed(2);
    // 赋值到对应的readonly输入框
    $(`#rep${r+1}-average`).val(repAverage);
  }

  // 计算各季度销售额最高的代表（保留原有正确逻辑）
  for (let q = 0; q < 4; q++) {
    let maxSales = 0;
    let topRepName = '';
    for (let r = 0; r < 3; r++) {
      if (salesData[r][q] > maxSales) {
        maxSales = salesData[r][q];
        topRepName = `代表${r+1}`;
      }
    }
    $(`#q${q+1}-top-rep`).val(topRepName);
  }
}

// 绑定计算按钮点击事件
$('#calculate-btn').on('click', calculateStats);

关键修复点 #

1. 强制数据类型转换：读取输入框值时用parseInt()转换为数字，并用|| 0处理空输入，避免NaN
2. 正确遍历二维数组：计算平均时先遍历销售代表，再累加该代表的所有季度数据
3. 校验选择器匹配：确保代码中输入框的ID选择器与HTML中的ID完全一致（比如rep1-average）
4. 优化数值展示：用toFixed(2)保留两位小数，符合销售额的展示习惯

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