如何用JavaScript全局函数处理迭代并保存分数实现两行求和

嘿，刚接触技术的话咱们一步步来，绝对给你讲明白！先理清楚你的核心需求：

• 输入框值变化时，单元格背景色跟着变，同时输出分数到控制台和span
• 把每个单元格的分数存到变量里，最后能分别算出两行的总分

下面是我给你写的简单易懂的实现方案，每一步都有注释：

一、HTML结构（先搭好页面架子） #

先给每个输入框加上行列标识，方便我们后续定位是哪一行哪一列的分数：

<table>
  <!-- 第一行 -->
  <tr>
    <td>
      <input type="number" class="score-input" data-row="1" data-col="1">
      <span class="score-display">分数：0</span>
    </td>
    <td>
      <input type="number" class="score-input" data-row="1" data-col="2">
      <span class="score-display">分数：0</span>
    </td>
    <td><span id="row1-total">第一行总分：0</span></td>
  </tr>
  <!-- 第二行 -->
  <tr>
    <td>
      <input type="number" class="score-input" data-row="2" data-col="1">
      <span class="score-display">分数：0</span>
    </td>
    <td>
      <input type="number" class="score-input" data-row="2" data-col="2">
      <span class="score-display">分数：0</span>
    </td>
    <td><span id="row2-total">第二行总分：0</span></td>
  </tr>
</table>

二、JavaScript逻辑（核心功能实现） #

我把代码拆成几个部分，每一步都写了注释，你跟着看绝对能懂：

// 1. 定义一个变量来存储所有分数，结构清晰，新手好理解
// row1对应第一行，col1/col2对应第一行的两个单元格分数，初始值都是0
let scores = {
  row1: { col1: 0, col2: 0 },
  row2: { col1: 0, col2: 0 }
};

// 2. 获取所有输入框，给每个输入框绑定输入事件
const allInputs = document.querySelectorAll('.score-input');
allInputs.forEach(input => {
  input.addEventListener('input', function() {
    // 把输入值转成数字，空输入或者非数字的话默认算0分
    const currentScore = Number(this.value) || 0;
    // 获取当前输入框对应的行和列（从HTML的data属性里拿）
    const currentRow = this.dataset.row;
    const currentCol = this.dataset.col;

    // --- 你的原有功能：改变单元格背景色 ---
    if (currentScore > 80) {
      this.parentElement.style.backgroundColor = 'lightgreen'; // 高分绿色
    } else if (currentScore >= 60) {
      this.parentElement.style.backgroundColor = 'lightyellow'; // 及格黄色
    } else {
      this.parentElement.style.backgroundColor = 'lightcoral'; // 不及格红色
    }

    // --- 新功能：把当前分数存入变量 ---
    scores[`row${currentRow}`][`col${currentCol}`] = currentScore;

    // --- 你的原有功能：输出分数到控制台和span ---
    console.log(`当前分数：${currentScore}`);
    // 找到当前输入框旁边的span，更新显示分数
    this.nextElementSibling.textContent = `分数：${currentScore}`;

    // --- 新功能：实时计算对应行的总分 ---
    calculateRowTotal(currentRow);
  });
});

// 3. 写一个专门的求和函数，计算指定行的总分
function calculateRowTotal(rowNumber) {
  // 拿到当前行的所有分数
  const rowScoreData = scores[`row${rowNumber}`];
  // 用reduce方法把所有分数加起来（新手可以理解成：遍历所有分数，累加求和）
  const total = Object.values(rowScoreData).reduce((sum, num) => sum + num, 0);

  // 更新页面上的总分显示
  document.getElementById(`row${rowNumber}-total`).textContent = `第${rowNumber}行总分：${total}`;
  
  // 如果你需要把总分也存起来，就加这行：
  // scores[`row${rowNumber}`].total = total;
}

三、新手友好小提示 #

• 如果你的单元格数量更多（比如第一行有3个），只要在scores里加col3: 0，同时给输入框加data-col="3"就行，不用改太多代码
• type="number"能防止用户输入非数字，Number(this.value) || 0是处理空输入的情况，避免报错
• 你可以根据自己的需求调整背景色的判断条件（比如改成>90绿色，>70黄色），直接改if里的数值就行

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