如何统计<td>列数并在末尾显示总数？求助实现学生考勤统计功能

嘿，我来帮你拆解这两个问题，一步步来解决：

一、统计标签的列数并显示总数 #

这里分两种常见场景，看你需要的是哪种：

场景1：统计页面中所有的总数量，在表格末尾展示 #

用几行JavaScript就能快速实现，思路很直白：先获取所有单元格统计总数，再给表格新增一行展示结果。示例代码如下：

// 1. 获取所有<td>元素和目标表格
const allCells = document.querySelectorAll('td');
const targetTable = document.querySelector('table');

// 2. 获取表格的列数（取第一行的单元格数，用来设置跨列显示）
const columnCount = targetTable.querySelector('tr').querySelectorAll('td').length;

// 3. 创建统计行
const totalRow = document.createElement('tr');
const totalCell = document.createElement('td');
totalCell.colSpan = columnCount; // 让统计单元格跨满整行
totalCell.textContent = `总单元格数：${allCells.length}`;
totalRow.appendChild(totalCell);

// 4. 将统计行添加到表格末尾
targetTable.appendChild(totalRow);

场景2：统计每行的数量，在每行末尾单独显示 #

如果需要给每一行标注该行的列数，只需要遍历每一行统计即可：

const rows = document.querySelectorAll('table tr');
rows.forEach(row => {
  const cellCount = row.querySelectorAll('td').length;
  const countCell = document.createElement('td');
  countCell.textContent = `本行列数：${cellCount}`;
  row.appendChild(countCell);
});

二、统计每位学生的缺勤及请假次数 #

这个需求的核心是识别考勤状态并累加计数，关键要确保你的考勤记录有统一的判断依据（比如固定的类名、文本内容）。假设你的表格结构是「姓名+每日考勤」的形式，我给你写个通用的实现方案：

示例代码（基于类名判断状态） #

假设你用absent类标记缺勤，leave类标记请假，代码如下：

// 获取所有学生行（跳过表头，只取tbody里的行）
const studentRows = document.querySelectorAll('tbody tr');

studentRows.forEach(row => {
  // 提取学生姓名
  const studentName = row.querySelector('td:first-child').textContent.trim();
  // 获取该学生的所有考勤单元格（跳过姓名列）
  const attendanceCells = row.querySelectorAll('td:not(:first-child)');
  
  let absentTimes = 0;
  let leaveTimes = 0;

  // 遍历每个考勤单元格，统计次数
  attendanceCells.forEach(cell => {
    if (cell.classList.contains('absent')) {
      absentTimes++;
    } else if (cell.classList.contains('leave')) {
      leaveTimes++;
    }
    // 如果是用文本内容判断，替换成下面的逻辑：
    // const status = cell.textContent.trim();
    // if (status === '缺勤') absentTimes++;
    // else if (status === '请假') leaveTimes++;
  });

  // 将统计结果添加到当前行末尾
  const absentCell = document.createElement('td');
  absentCell.textContent = `缺勤：${absentTimes}`;
  const leaveCell = document.createElement('td');
  leaveCell.textContent = `请假：${leaveTimes}`;
  
  row.appendChild(absentCell);
  row.appendChild(leaveCell);
});

关键提示 #

• 如果你的表格是用React/Vue这类框架动态渲染的，一定要在组件挂载完成（或数据更新完成）后再执行统计代码，否则会无法获取到DOM元素
• 如果需要做全班级的缺勤/请假汇总，可以在遍历的时候额外维护两个全局变量，累加所有学生的次数，最后在表格底部新增一行显示总汇总
• 要是你的考勤状态用其他方式标识（比如特定颜色、图标），可以调整判断逻辑，比如检查单元格的style.backgroundColor属性

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