如何使用jQuery计算表格<tr>内员工工作日并显示在NWD列？

嘿，我来帮你搞定这个需求！下面我会一步步给你讲清楚怎么用jQuery实现表格里每行员工的工作日天数统计，直接把结果填到对应的NWD列单元格里。

核心思路 #

• 定位到目标表格的每一行（注意排除表头行）
• 遍历当前行中所有需要统计的工作日数值单元格
• 把这些数值累加求和
• 将计算结果填入当前行的NWD列单元格

基础实现代码 #

假设你的表格结构大概是这样的（可以根据实际DOM结构调整选择器）：

• 表格ID为employeeTable
• 每行中存储单日工作日数的单元格有统一类名workday-cell
• NWD列的单元格类名为nwd-cell

$(document).ready(function() {
  // 遍历表格tbody里的每一行（跳过表头）
  $('#employeeTable tbody tr').each(function() {
    let totalWorkdays = 0;
    
    // 遍历当前行的所有工作日数值单元格
    $(this).find('.workday-cell').each(function() {
      // 把单元格文本转成数字，非数字内容按0处理，避免NaN
      const dayValue = parseFloat($(this).text()) || 0;
      totalWorkdays += dayValue;
    });
    
    // 把统计结果写入NWD列，toFixed(0)确保显示整数，有小数需求可调整参数
    $(this).find('.nwd-cell').text(totalWorkdays.toFixed(0));
  });
});

关键细节说明 #

• 选择器适配：一定要根据你页面实际的表格ID、单元格类名来修改代码里的选择器，比如如果表格没有ID，也可以用类选择器.employee-table
• 数值处理：用parseFloat转换文本为数字，加上|| 0是为了防止单元格是空值或者非数字内容时出现NaN的情况
• 格式控制：toFixed(0)用来把结果转成整数，如果你需要保留小数（比如半天班），可以改成toFixed(1)之类的

实时更新扩展（可选） #

如果你的表格是可编辑的（比如单元格支持修改，或者用输入框录入数据），可以给数值单元格绑定事件，实现修改后自动更新NWD数值：

$(document).ready(function() {
  // 封装计算逻辑成函数，方便复用
  function updateNwd(row) {
    let total = 0;
    $(row).find('.workday-cell').each(function() {
      const value = parseFloat($(this).text()) || 0;
      total += value;
    });
    $(row).find('.nwd-cell').text(total.toFixed(0));
  }

  // 页面加载时初始化计算
  $('#employeeTable tbody tr').each(function() {
    updateNwd(this);
  });

  // 绑定事件，当工作日单元格内容变化时重新计算
  $('.workday-cell').on('input change', function() {
    // 找到当前单元格所在的行
    const currentRow = $(this).closest('tr');
    updateNwd(currentRow);
  });
});

注意事项 #

• 确保你的页面已经正确引入了jQuery库，不然代码会失效
• 如果表格是动态加载的（比如通过AJAX获取数据后渲染），需要在表格渲染完成后再调用计算函数，或者用事件委托的方式处理

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