无需jQuery实现表格列组的点击折叠与URL预设视图切换

我来给你一个纯原生JavaScript的解决方案，完全不需要jQuery，刚好匹配你的需求——既支持点击单独切换每个步骤列组的显示隐藏，又能通过URL参数加载预设视图，还能轻松配置保留每个列组的指定列。

核心思路是利用<col>元素的样式控制列显示，结合原生JS处理点击事件和URL参数解析，同时基于你已有的colgroup结构做最小化修改，不会影响现有系统的其他逻辑。

先给第一层表头的每个步骤标题添加可点击标识，同时给需要保留的列加专属类（如果不需要保留列，直接跳过这部分即可）：

<table>
  <thead>
    <colgroup>
      <col>
      <col>
      <col>
      <!-- 给Step0需要保留的列加step0-keep类 -->
      <col class='step0 step0-keep'>
      <col span='10' class='step0'>
      <col class='step1 step1-keep'>
      <col class='step1'>
      <col class='step2 step2-keep'>
      <col span='2' class='step2'>
      <col class='step3 step3-keep'>
      <col span='2' class='step3'>
      <col class='step4 step4-keep'>
      <col span='2' class='step4'>
    </colgroup>
    <tr>
      <th rowspan='2'>ID</th>
      <th rowspan='2'>Name</th>
      <th rowspan='2'>State</th>
      <!-- 给每个步骤表头加data-step属性，方便点击时识别对应列组 -->
      <th colspan='11' data-step="step0">Step 0 <span style="font-size:0.8em">(点击切换)</span></th>
      <th colspan='2' data-step="step1">Step 1 <span style="font-size:0.8em">(点击切换)</span></th>
      <th colspan='3' data-step="step2">Step 2 <span style="font-size:0.8em">(点击切换)</span></th>
      <th colspan='3' data-step="step3">Step 3 <span style="font-size:0.8em">(点击切换)</span></th>
      <th colspan='3' data-step="step4">Step 4 <span style="font-size:0.8em">(点击切换)</span></th>
    </tr>
    <tr>
      <th>Step 0 - Info 1</th>
      <th>Step 0 - Info 2</th>
      <th>Step 0 - Info 3</th>
      <th>Step 0 - Info 4</th>
      <th>Step 0 - Info 5</th>
      <th>Step 0 - Info 6</th>
      <th>Step 0 - Info 7</th>
      <th>Step 0 - Info 8</th>
      <th>Step 0 - Info 9</th>
      <th>Step 0 - User+Date</th>
      <th>Step 0 - Notes</th>
      <th>Step 1 - User+Date</th>
      <th>Step 1 - Notes</th>
      <th>Step 2 - Info</th>
      <th>Step 2 - User+Date</th>
      <th>Step 2 - Notes</th>
      <th>Step 3 - Info</th>
      <th>Step 3 - User+Date</th>
      <th>Step 3 - Notes</th>
      <th>Step 4 - Info</th>
      <th>Step 4 - User+Date</th>
      <th>Step 4 - Notes</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里是你的表格内容，示例行 -->
    <tr>
      <td>1</td>
      <td>项目A</td>
      <td>处理中</td>
      <td>基础信息1</td>
      <td>基础信息2</td>
      <!-- 其他单元格省略 -->
    </tr>
  </tbody>
</table>

把这段代码放在页面底部（或者<head>里的DOMContentLoaded事件中），完全独立，不会和现有脚本冲突：

document.addEventListener('DOMContentLoaded', function() {
  // 1. 预设视图配置：自定义不同视图的显示列组
  const presetViews = {
    'minimal': ['step0'], // 极简视图：只显示Step0核心列
    'detailed': ['step0', 'step1', 'step2', 'step3', 'step4'], // 详细视图：显示所有步骤
    'progress': ['step2', 'step3', 'step4'] // 进度视图：只显示后续步骤
  };

  // 2. 解析URL参数，自动加载预设视图
  function loadPresetView() {
    const urlParams = new URLSearchParams(window.location.search);
    const viewName = urlParams.get('view');
    if (presetViews[viewName]) {
      // 先隐藏所有非保留的步骤列
      document.querySelectorAll('[class^="step"]:not([class*="-keep"])').forEach(col => {
        col.style.display = 'none';
      });
      // 再显示预设视图指定的列组
      presetViews[viewName].forEach(step => {
        document.querySelectorAll(`.${step}:not(.${step}-keep)`).forEach(col => {
          col.style.display = '';
        });
      });
    }
  }

  // 3. 绑定点击事件，切换单个步骤列组的显示隐藏
  function bindToggleEvents() {
    document.querySelectorAll('th[data-step]').forEach(th => {
      th.style.cursor = 'pointer'; // 给可点击表头加鼠标指针提示
      th.addEventListener('click', function() {
        const stepClass = this.dataset.step;
        // 切换该步骤下非保留列的显示状态
        const cols = document.querySelectorAll(`.${stepClass}:not(.${stepClass}-keep)`);
        cols.forEach(col => {
          col.style.display = col.style.display === 'none' ? '' : 'none';
        });
        // 可选：给点击的表头加样式标记
        this.classList.toggle('toggled');
      });
    });
  }

  // 初始化执行：先加载预设视图，再绑定点击事件
  loadPresetView();
  bindToggleEvents();
});

代码说明： #

• 预设视图：你可以自由修改presetViews，比如新增overview视图只显示关键步骤，完全按需配置。
• URL触发：访问你的页面地址?view=minimal会自动加载极简视图，?view=detailed则加载全量详细视图。
• 点击切换：点击每个步骤的第一层表头，会切换该步骤下非保留列的显示/隐藏，保留列始终可见。
• 兼容性：现代浏览器（Chrome、Firefox、Edge）都能完美支持，内网系统一般无需担心旧版浏览器问题。

可以加一点CSS让交互更直观：

th[data-step] {
  user-select: none; /* 禁止选中表头文字 */
  transition: all 0.2s;
}
th[data-step].toggled {
  color: #666;
  background-color: #f5f5f5;
}

1. 保留列开关：如果不需要保留列，直接删除col元素上的stepX-keep类即可，点击时会隐藏该步骤所有列。
2. 现有脚本兼容：这段JS是自包含的原生代码，不会干扰现有系统的其他逻辑，直接插入即可。
3. 列组调整：如果后续新增步骤，只需要在colgroup里添加对应类的<col>，并在presetViews里配置即可。

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