如何使用CSS选择器仅选中表格绝对最后一行 避免误选可折叠区段末行

修复方案 #

问题根源 #

你原先使用的:not(:last-child)选择器规则，会排除所有父容器下的最后一个tr元素，而你的表格每个折叠区段都被单独包裹在<tbody class="hide">容器中，所以每个tbody下的最后一行（Jill、Jim行）都会被误排除，只有整个表格最后的Total行才是你真正需要排除的对象。 #

具体修改点 #

1. 更换可编辑单元格的选择逻辑：直接选中表格第二列所有单元格，再单独排除Total行的求和单元格，选择器改为table tr td:nth-child(2):not(#total)，精准匹配需要编辑的单元格，不会误伤折叠区段的最后一行。
2. 修正事件绑定错误：原代码中addEventListener("change", getsum())的getsum带了括号，会直接执行函数而非作为回调绑定，同时contentEditable元素对change事件触发不灵敏，改用input事件保证编辑时实时触发求和。
3. 移除冗余逻辑：删除单元格上多余的oninput="editcell()"属性，避免重复绑定事件。

修改后完整代码 #

JS代码

$(document).ready(function() {
  $('.hide').hide();
  $('[data-toggle="toggle"]').change(function() {
    $("label[for='" + this.id + "'] span").toggle();
    $(this).parents().next('.hide').toggle();
  });
});

function editcell() {
  // 精准选择所有非Total行的第二列单元格
  let cellnum = document.querySelectorAll("table tr td:nth-child(2):not(#total)");
  cellnum.forEach(td => {
    td.setAttribute("contentEditable", true);
    // 修正事件绑定，改用input事件
    td.addEventListener("input", getsum);
  });
}

function getsum() {
  let sum = 0;
  // 计算时同样排除Total单元格
  let cellnum = document.querySelectorAll("table tr td:nth-child(2):not(#total)");
  cellnum.forEach(cell => {
    sum += parseInt(cell.textContent.trim()) || 0;
  });
  document.getElementById('total').textContent = sum;
}

editcell();

HTML代码（仅列修改部分，其余不变）

所有数据行的td移除oninput="editcell()"属性即可，示例：

<tr>
  <td>Jack</td>
  <td id="jack">
    <span>0</span>
  </td>
</tr>

修改后所有折叠区段的行都可以正常编辑，且Total行始终不可编辑，求和逻辑也会实时触发。

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