切换CSS类的JavaScript函数异常：5*4网格行类交换问题

问题原因 #

你的代码直接在循环中操作DOM元素的classList，但classList是动态的DOMTokenList引用，循环时前面的元素类被修改后，后续元素读取的是已经变更后的值，而非初始状态的类集合，导致最终首行和末行被错误覆盖为第二行的类。

修正方案 #

先将所有td的初始类集合保存为静态数组，再根据规则重新赋值，避免动态引用带来的覆盖问题：

function switchColorUp() {
  const allTDs = document.getElementsByTagName("td");
  // 保存每个td的初始类名（静态副本）
  const originalClasses = Array.from(allTDs).map(td => td.className);
  
  const rowCount = 5;
  const colCount = 4;

  for (let i = 0; i < allTDs.length; i++) {
    let sourceIndex;
    // 前4行取下一行同位置的初始类
    if (i < (rowCount - 1) * colCount) {
      sourceIndex = i + colCount;
    } else {
      // 最后一行取第一行同位置的初始类
      sourceIndex = i - (rowCount - 1) * colCount;
    }
    // 重新赋值类名
    allTDs[i].className = originalClasses[sourceIndex];
  }
}

逻辑说明 #

1. 保存初始类：用Array.from将td集合转为数组，通过map提取每个元素的className（静态字符串）存入数组，确保后续读取的是初始状态的类。
2. 按行分配类：
   • 前4行（索引0-15）的每个td，取下一行同位置的初始类；
   • 最后一行（索引16-19）的每个td，取第一行同位置的初始类，实现首行类移到末行、其他行向上替换的效果。

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