选中CheckBox累加前两列td值遇阻，获取前td元素返回空值

你的代码存在两个核心问题，导致无法正确获取目标单元格并实现求和：

1. 点击事件未传递当前复选框元素，函数内$(this)无法指向触发事件的复选框
2. 使用closest('tr').prev('td')获取单元格的方式错误——prev()是查找当前元素的同级前一个元素，tr的同级是其他tr，不是td，因此永远拿不到目标数值

修正步骤 #

1. 修正HTML点击事件传递

把复选框的onclick改为传递当前元素，让函数能定位到触发事件的复选框：

<input type="checkbox" value="checked" onclick="doSumAeFunction(this)" />

2. 重写JavaScript求和逻辑

实现勾选累加、取消勾选减扣的逻辑，同时实时更新页面求和结果：

function doSumAeFunction(checkbox) {
    // 获取当前复选框所在的行
    const row = $(checkbox).closest('tr');
    // 获取该行Maths（第4列，索引3）和Science 2（第5列，索引4）的数值
    const mathsMark = parseInt(row.find('td').eq(3).text());
    const scienceMark = parseInt(row.find('td').eq(4).text());
    
    // 获取求和结果的DOM元素
    const mathsSumEl = $('#sum_of_maths');
    const scienceSumEl = $('#sum_of_science');
    
    // 解析当前已有的求和值，默认0
    let currentMathsSum = parseInt(mathsSumEl.text().replace('Sum of Maths is: ', '')) || 0;
    let currentScienceSum = parseInt(scienceSumEl.text().replace('Sum of Science is: ', '')) || 0;
    
    // 根据勾选状态更新求和值
    if (checkbox.checked) {
        currentMathsSum += mathsMark;
        currentScienceSum += scienceMark;
    } else {
        currentMathsSum -= mathsMark;
        currentScienceSum -= scienceMark;
    }
    
    // 更新页面显示
    mathsSumEl.text(`Sum of Maths is: ${currentMathsSum}`);
    scienceSumEl.text(`Sum of Science is: ${currentScienceSum}`);
}

3. 补全HTML错误标签

原代码中第二行复选框的<td>未闭合，同时表格style属性重复，修正后：

<table class="table table-bordered text-center" style="width:auto">
  <!-- ...其他代码不变... -->
  <tr>
    <td>1</td>
    <td>8</td>
    <td>7</td>
    <td>10</td>
    <td>5</td>
    <td><input type="checkbox" value="checked" onclick="doSumAeFunction(this)" /></td>
  </tr>
</table>

完整可运行代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table class="table table-bordered text-center" style="width:auto">
  <thead>
    <th>Sl No</th>
    <th>English</th>
    <th>Geography</th>
    <th>Maths</th>
    <th>Science 2</th>
    <th align="center">Select</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>22</td>
      <td>15</td>
      <td>12</td>
      <td>15</td>
      <td><input type="checkbox" value="checked" onclick="doSumAeFunction(this)"  /></td>
    </tr>
    <tr>
      <td>1</td>
      <td>8</td>
      <td>7</td>
      <td>10</td>
      <td>5</td>
      <td><input type="checkbox" value="checked" onclick="doSumAeFunction(this)"  /></td>
    </tr>
  </tbody>
</table>
<br />

<div>
  <div>Sum of Marks</div>
  <div id="sum_of_maths">Sum of Maths is: 0</div>
  <div id="sum_of_science">Sum of Science is: 0</div>
</div>

<script>
function doSumAeFunction(checkbox) {
    const row = $(checkbox).closest('tr');
    const mathsMark = parseInt(row.find('td').eq(3).text());
    const scienceMark = parseInt(row.find('td').eq(4).text());
    
    const mathsSumEl = $('#sum_of_maths');
    const scienceSumEl = $('#sum_of_science');
    
    let currentMathsSum = parseInt(mathsSumEl.text().replace('Sum of Maths is: ', '')) || 0;
    let currentScienceSum = parseInt(scienceSumEl.text().replace('Sum of Science is: ', '')) || 0;
    
    if (checkbox.checked) {
        currentMathsSum += mathsMark;
        currentScienceSum += scienceMark;
    } else {
        currentMathsSum -= mathsMark;
        currentScienceSum -= scienceMark;
    }
    
    mathsSumEl.text(`Sum of Maths is: ${currentMathsSum}`);
    scienceSumEl.text(`Sum of Science is: ${currentScienceSum}`);
}
</script>

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